From 7b1d9e9f21ef76b98df6ce32234ac00a629ba518 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 10 Mar 2023 14:37:42 +0800
Subject: [PATCH] WIP files + new tokens

---
 apps/web/components/AddToHomescreen.tsx       |   4 +-
 .../components/AdditionalCalendarSelector.tsx |   2 +-
 apps/web/components/AppListCard.tsx           |   2 +-
 .../DestinationCalendarSelector.tsx           |   2 +-
 apps/web/components/Embed.tsx                 |  32 +-
 apps/web/components/ImageUploader.tsx         |   8 +-
 apps/web/components/NavTabs.tsx               |   6 +-
 apps/web/components/apps/App.tsx              |  32 +-
 .../components/apps/CalendarListContainer.tsx |  14 +-
 .../apps/DestinationCalendarSelector.tsx      |   2 +-
 apps/web/components/auth/TwoFactor.tsx        |   2 +-
 .../availability/SkeletonLoader.tsx           |   2 +-
 .../web/components/booking/AvailableTimes.tsx |  10 +-
 .../components/booking/BookingDescription.tsx |   4 +-
 .../components/booking/BookingListItem.tsx    |  30 +-
 apps/web/components/booking/CancelBooking.tsx |  10 +-
 .../web/components/booking/SkeletonLoader.tsx |   2 +-
 .../components/booking/TimezoneDropdown.tsx   |   2 +-
 .../booking/pages/AvailabilityPage.tsx        |   8 +-
 .../components/booking/pages/BookingPage.tsx  |   4 +-
 .../components/dialog/EditLocationDialog.tsx  |  12 +-
 .../components/dialog/RescheduleDialog.tsx    |   6 +-
 apps/web/components/error/error-page.tsx      |  12 +-
 .../components/eventtype/AvailabilityTab.tsx  |   9 +-
 .../eventtype/CustomEventTypeModal.tsx        |  24 +-
 .../components/eventtype/EventAdvancedTab.tsx |   6 +-
 .../web/components/eventtype/EventAppsTab.tsx |   2 +-
 .../components/eventtype/EventLimitsTab.tsx   |   8 +-
 .../components/eventtype/EventSetupTab.tsx    |   6 +-
 .../web/components/eventtype/EventTeamTab.tsx |   2 +-
 .../eventtype/EventTypeSingleLayout.tsx       |  10 +-
 .../eventtype/RecurringEventController.tsx    |  10 +-
 .../RequiresConfirmationController.tsx        |   8 +-
 .../components/eventtype/SkeletonLoader.tsx   |   2 +-
 .../components/ConnectedCalendarItem.tsx      |   4 +-
 .../CreateEventsOnCalendarSelect.tsx          |   2 +-
 .../steps-views/ConnectCalendars.tsx          |  10 +-
 .../steps-views/SetupAvailability.tsx         |   2 +-
 .../steps-views/UserProfile.tsx               |   8 +-
 .../steps-views/UserSettings.tsx              |   8 +-
 apps/web/components/layouts/WizardLayout.tsx  |   6 +-
 .../security/ChangePasswordSection.tsx        |  10 +-
 .../security/DisableTwoFactorModal.tsx        |   4 +-
 .../security/DisableUserImpersonation.tsx     |   4 +-
 .../security/EnableTwoFactorModal.tsx         |   4 +-
 .../security/TwoFactorAuthSection.tsx         |   4 +-
 .../security/TwoFactorModalHeader.tsx         |   6 +-
 .../settings/DisableTwoFactorModal.tsx        |   4 +-
 apps/web/components/setup/AdminUser.tsx       |   4 +-
 apps/web/components/setup/ChooseLicense.tsx   |  16 +-
 .../components/setup/EnterpriseLicense.tsx    |  10 +-
 apps/web/components/setup/StepDone.tsx        |   4 +-
 apps/web/components/team/screens/Team.tsx     |   8 +-
 apps/web/components/ui/AuthContainer.tsx      |   6 +-
 apps/web/components/ui/EditableHeading.tsx    |   4 +-
 apps/web/components/ui/InfoBadge.tsx          |   2 +-
 apps/web/components/ui/LinkIconButton.tsx     |   4 +-
 apps/web/components/ui/ModalContainer.tsx     |   2 +-
 apps/web/components/ui/PoweredByCal.tsx       |   2 +-
 .../components/ui/SettingInputContainer.tsx   |   4 +-
 .../UsernameAvailability/PremiumTextfield.tsx |  10 +-
 .../UsernameTextfield.tsx                     |   6 +-
 apps/web/components/ui/form/CheckboxField.tsx |   6 +-
 apps/web/components/ui/form/CheckedSelect.tsx |   2 +-
 apps/web/components/ui/form/DatePicker.tsx    |   4 +-
 .../web/components/ui/form/LocationSelect.tsx |   2 +-
 apps/web/components/ui/form/MinutesField.tsx  |   6 +-
 apps/web/pages/404.tsx                        | 290 +++++++++---------
 apps/web/pages/500.tsx                        |  10 +-
 apps/web/pages/[user].tsx                     |  28 +-
 apps/web/pages/[user]/[type].tsx              |  10 +-
 apps/web/pages/[user]/book.tsx                |  12 +-
 apps/web/pages/_document.tsx                  |   2 +-
 apps/web/pages/apps/[slug]/setup.tsx          |   2 +-
 apps/web/pages/apps/categories/[category].tsx |   2 +-
 apps/web/pages/apps/categories/index.tsx      |   6 +-
 apps/web/pages/apps/index.tsx                 |   6 +-
 apps/web/pages/auth/error.tsx                 |   6 +-
 apps/web/pages/auth/forgot-password/[id].tsx  |   6 +-
 apps/web/pages/auth/forgot-password/index.tsx |   2 +-
 apps/web/pages/auth/logout.tsx                |   6 +-
 apps/web/pages/auth/setup/index.tsx           |   4 +-
 apps/web/pages/auth/verify.tsx                |  10 +-
 apps/web/pages/availability/[schedule].tsx    |  14 +-
 apps/web/pages/availability/index.tsx         |   2 +-
 apps/web/pages/availability/troubleshoot.tsx  |  12 +-
 apps/web/pages/booking/[uid].tsx              |  44 +--
 apps/web/pages/bookings/[status].tsx          |   6 +-
 apps/web/pages/event-types/index.tsx          |  20 +-
 .../web/pages/getting-started/[[...step]].tsx |   4 +-
 apps/web/pages/maintenance.tsx                |   6 +-
 apps/web/pages/more.tsx                       |   2 +-
 .../pages/settings/my-account/appearance.tsx  |   4 +-
 .../pages/settings/my-account/calendars.tsx   |  14 +-
 .../settings/my-account/conferencing.tsx      |   2 +-
 .../web/pages/settings/my-account/general.tsx |  10 +-
 .../pages/settings/security/impersonation.tsx |   2 +-
 apps/web/pages/settings/security/password.tsx |   4 +-
 apps/web/pages/signup.tsx                     |  14 +-
 apps/web/pages/team/[slug].tsx                |  16 +-
 apps/web/pages/video/meeting-ended/[uid].tsx  |   8 +-
 .../pages/video/meeting-not-started/[uid].tsx |  10 +-
 apps/web/pages/video/no-meeting-found.tsx     |   8 +-
 apps/web/styles/globals.css                   | 112 ++++---
 packages/app-store/_components/AppCard.tsx    |   2 +-
 .../applecalendar/pages/setup/index.tsx       |   4 +-
 .../caldavcalendar/pages/setup/index.tsx      |   4 +-
 .../app-store/closecom/pages/setup/index.tsx  |   8 +-
 packages/app-store/components.tsx             |   8 +-
 .../pages/setup/index.tsx                     |   4 +-
 .../pages/setup/index.tsx                     |   4 +-
 .../exchangecalendar/pages/setup/index.tsx    |   4 +-
 .../giphy/components/SearchDialog.tsx         |  14 +-
 .../components/ExistingGoogleCal.tsx          |   6 +-
 .../components/EventTypeAppCardInterface.tsx  |   2 +-
 .../rainbow/components/RainbowInstallForm.tsx |   6 +-
 .../rainbow/components/RainbowKit.tsx         |   6 +-
 .../routing-forms/components/FormActions.tsx  |   6 +-
 .../components/FormInputFields.tsx            |   2 +-
 .../routing-forms/components/SingleForm.tsx   |  14 +-
 .../react-awesome-query-builder/widgets.tsx   |  12 +-
 .../pages/forms/[...appPages].tsx             |   4 +-
 .../pages/reporting/[...appPages].tsx         |  10 +-
 .../pages/route-builder/[...appPages].tsx     |   8 +-
 .../pages/router/[...appPages].tsx            |   2 +-
 .../pages/routing-link/[...appPages].tsx      |  10 +-
 .../app-store/sendgrid/pages/setup/index.tsx  |   8 +-
 .../components/EventTypeAppCardInterface.tsx  |   2 +-
 .../pages/how-to-use/[...appPages].tsx        |  18 +-
 .../vital/components/AppConfiguration.tsx     |   2 +-
 .../components/confirmDialog.tsx              |   4 +-
 .../zapier/components/TemplateCard.tsx        |   6 +-
 .../app-store/zapier/pages/setup/index.tsx    |   8 +-
 packages/config/tailwind-preset.js            | 125 ++------
 packages/config/theme/colors.css              |  86 ++++++
 packages/config/theme/generateColor.ts        |  85 +++++
 packages/config/theme/interfaces.ts           |  17 +
 .../embed-core/src/Inline/inlineHtml.ts       |   2 +-
 .../embed-core/src/ModalBox/ModalBoxHtml.ts   |   4 +-
 packages/features/apps/AdminAppsList.tsx      |   2 +-
 .../bookings/components/EventTypeFilter.tsx   |   6 +-
 .../bookings/components/PeopleFilter.tsx      |  12 +-
 .../bookings/components/TeamFilter.tsx        |  18 +-
 packages/features/calendars/DatePicker.tsx    |  16 +-
 .../calendars/DestinationCalendarSelector.tsx |   4 +-
 .../weeklyview/components/Calendar.tsx        |   8 +-
 .../components/DateValues/index.tsx           |  12 +-
 .../weeklyview/components/event/Empty.tsx     |   9 +-
 .../weeklyview/components/event/Event.tsx     |  10 +-
 .../components/heading/SchedulerHeading.tsx   |   4 +-
 .../components/horizontalLines/index.tsx      |   6 +-
 .../api-keys/components/ApiKeyDialogForm.tsx  |  16 +-
 .../ee/api-keys/components/ApiKeyListItem.tsx |   5 +-
 .../ee/payments/components/Payment.tsx        |  12 +-
 .../ee/payments/components/PaymentPage.tsx    |  21 +-
 .../ee/sso/components/ConnectionInfo.tsx      |   6 +-
 .../ee/sso/components/OIDCConnection.tsx      |   6 +-
 .../ee/sso/components/SAMLConnection.tsx      |   6 +-
 .../features/ee/sso/page/teams-sso-view.tsx   |   2 +-
 .../features/ee/sso/page/user-sso-view.tsx    |   2 +-
 .../ee/support/components/HelpMenuItem.tsx    |  28 +-
 .../lib/freshchat/FreshChatMenuItem.tsx       |   2 +-
 .../lib/helpscout/HelpscoutMenuItem.tsx       |   2 +-
 .../support/lib/intercom/IntercomMenuItem.tsx |   2 +-
 .../support/lib/zendesk/ZendeskMenuItem.tsx   |   2 +-
 .../ee/teams/components/AddNewTeamMembers.tsx |   5 +-
 .../components/DisableTeamImpersonation.tsx   |   2 +-
 .../components/MemberChangeRoleModal.tsx      |   9 +-
 .../components/MemberInvitationModal.tsx      |  10 +-
 .../ee/teams/components/MemberListItem.tsx    |   2 +-
 .../components/SkeletonloaderTeamList.tsx     |   2 +-
 .../components/TeamAvailabilityModal.tsx      |  11 +-
 .../components/TeamAvailabilityScreen.tsx     |  22 +-
 .../components/TeamAvailabilityTimes.tsx      |   8 +-
 .../ee/teams/components/TeamInviteList.tsx    |   2 +-
 .../teams/components/TeamInviteListItem.tsx   |   8 +-
 .../features/ee/teams/components/TeamList.tsx |  11 +-
 .../ee/teams/components/TeamListItem.tsx      |   7 +-
 .../features/ee/teams/components/TeamPill.tsx |   8 +-
 .../ee/teams/components/TeamsListing.tsx      |   4 +-
 .../components/v2/TeamAvailabilityModal.tsx   |   5 +-
 .../components/v2/TeamAvailabilityScreen.tsx  |  22 +-
 .../components/v2/TeamAvailabilityTimes.tsx   |   4 +-
 .../ee/teams/pages/team-appearance-view.tsx   |  12 +-
 .../ee/teams/pages/team-profile-view.tsx      |   6 +-
 .../ee/video/ViewRecordingsDialog.tsx         |   4 +-
 .../components/RecordingListItemSkeleton.tsx  |   2 +-
 .../components/UpgradeRecordingBanner.tsx     |   2 +-
 .../ee/workflows/components/EmptyScreen.tsx   |  12 +-
 .../components/EventWorkflowsTab.tsx          |  10 +-
 .../SkeletonLoaderEventWorkflowsTab.tsx       |   2 +-
 .../components/SkeletonLoaderList.tsx         |   2 +-
 .../components/WorkflowDetailsPage.tsx        |   6 +-
 .../workflows/components/WorkflowListPage.tsx |   6 +-
 .../components/WorkflowStepContainer.tsx      |  30 +-
 .../features/ee/workflows/pages/index.tsx     |  12 +-
 .../features/ee/workflows/pages/workflow.tsx  |   2 +-
 .../BulkEditDefaultConferencingModal.tsx      |  12 +-
 .../components/CheckedTeamSelect.tsx          |   4 +-
 .../components/CreateEventTypeDialog.tsx      |   2 +-
 .../eventtypes/components/EmptyPage.tsx       |   6 +-
 .../components/EventTypeDescription.tsx       |   4 +-
 .../components/MultiDropdownSelect.tsx        |   5 +-
 packages/features/form-builder/Components.tsx |  18 +-
 .../features/form-builder/FormBuilder.tsx     |  16 +-
 packages/features/kbar/Kbar.tsx               |  17 +-
 .../components/DateOverrideInputDialog.tsx    |   2 +-
 .../schedules/components/DateOverrideList.tsx |  10 +-
 .../schedules/components/Schedule.tsx         |  12 +-
 .../schedules/components/ScheduleListItem.tsx |   4 +-
 packages/features/settings/ThemeLabel.tsx     |   2 +-
 .../settings/layouts/SettingsLayout.tsx       |  40 +--
 packages/features/shell/Shell.tsx             |  54 ++--
 packages/features/tips/UpgradeTip.tsx         |   8 +-
 .../users/components/UserV2OptInBanner.tsx    |   4 +-
 .../webhooks/components/WebhookForm.tsx       |  22 +-
 .../webhooks/components/WebhookListItem.tsx   |   4 +-
 .../components/WebhookListItemSkeleton.tsx    |   2 +-
 .../components/WebhookTestDisclosure.tsx      |   4 +-
 packages/lib/OgImages.tsx                     |  10 +-
 packages/ui/components/alert/Alert.tsx        |   9 +-
 packages/ui/components/apps/AllApps.tsx       |  18 +-
 packages/ui/components/apps/AppCard.tsx       |  10 +-
 packages/ui/components/apps/Categories.tsx    |   2 +-
 .../ui/components/apps/SkeletonLoader.tsx     |   4 +-
 packages/ui/components/apps/Slider.tsx        |   4 +-
 packages/ui/components/avatar/Avatar.tsx      |   4 +-
 packages/ui/components/avatar/AvatarGroup.tsx |   2 +-
 packages/ui/components/badge/Badge.tsx        |  18 +-
 packages/ui/components/button/Button.tsx      |  32 +-
 .../ui/components/button/LinkIconButton.tsx   |   4 +-
 packages/ui/components/card/Card.tsx          |  12 +-
 packages/ui/components/card/FormCard.tsx      |   6 +-
 packages/ui/components/card/StepCard.tsx      |   2 +-
 .../dialog/ConfirmationDialogContent.tsx      |  10 +-
 packages/ui/components/dialog/Dialog.tsx      |  10 +-
 .../ui/components/divider/divider.stories.mdx |   4 +-
 .../editor/plugins/AddVariablesDropdown.tsx   |   4 +-
 .../editor/plugins/ToolbarPlugin.tsx          |   8 +-
 .../components/empty-screen/EmptyScreen.tsx   |   6 +-
 .../ui/components/form/checkbox/Checkbox.tsx  |   8 +-
 .../form/checkbox/MultiSelectCheckboxes.tsx   |   4 +-
 .../form/color-picker/colorpicker.tsx         |   4 +-
 .../date-range-picker/DateRangePicker.tsx     |  10 +-
 .../components/form/datepicker/DatePicker.tsx |   4 +-
 .../ui/components/form/dropdown/Dropdown.tsx  |  14 +-
 .../components/form/inputs/HintOrErrors.tsx   |   6 +-
 packages/ui/components/form/inputs/Input.tsx  |  26 +-
 packages/ui/components/form/inputs/Label.tsx  |   2 +-
 packages/ui/components/form/select/Select.tsx |   2 +-
 .../ui/components/form/select/components.tsx  |  14 +-
 .../form/selectimproved/components/Item.tsx   |  16 +-
 .../selectimproved/components/SearchInput.tsx |   4 +-
 .../form/selectimproved/components/Select.tsx |  20 +-
 packages/ui/components/form/step/FormStep.tsx |   2 +-
 packages/ui/components/form/step/Stepper.tsx  |   6 +-
 packages/ui/components/form/step/Steps.tsx    |   4 +-
 .../components/form/switch/SettingsToggle.tsx |   2 +-
 packages/ui/components/form/switch/Switch.tsx |   6 +-
 .../form/toggleGroup/BooleanToggleGroup.tsx   |   6 +-
 .../form/toggleGroup/ToggleGroup.tsx          |   4 +-
 .../ui/components/form/wizard/WizardForm.tsx  |   4 +-
 .../image-uploader/ImageUploader.tsx          |   8 +-
 .../ui/components/layout/ShellSubHeading.tsx  |   4 +-
 .../ui/components/layout/spacing.stories.mdx  |  20 +-
 packages/ui/components/list/List.tsx          |   8 +-
 .../navigation/tabs/HorizontalTabItem.tsx     |   4 +-
 .../navigation/tabs/VerticalTabItem.tsx       |   4 +-
 .../ui/components/popover/AnimatedPopover.tsx |   4 +-
 .../popover/MeetingTimeInTimezones.tsx        |   6 +-
 packages/ui/components/skeleton/Loader.tsx    |   2 +-
 packages/ui/components/skeleton/index.tsx     |   4 +-
 packages/ui/components/toast/showToast.tsx    |   8 +-
 packages/ui/components/tooltip/Tooltip.tsx    |   2 +-
 .../ui/components/tooltip/tooltip.stories.mdx |   2 +-
 .../ui/components/top-banner/TopBanner.tsx    |  10 +-
 packages/ui/form/AddressInput.tsx             |   2 +-
 packages/ui/form/MultiSelectCheckboxes.tsx    |   2 +-
 packages/ui/form/PhoneInput.tsx               |   4 +-
 packages/ui/form/fields.tsx                   |  12 +-
 packages/ui/form/radio-area/Radio.tsx         |  10 +-
 .../ui/form/radio-area/RadioAreaGroup.tsx     |   4 +-
 packages/ui/form/radio-area/Select.tsx        |   6 +-
 283 files changed, 1511 insertions(+), 1379 deletions(-)
 create mode 100644 packages/config/theme/colors.css
 create mode 100644 packages/config/theme/generateColor.ts
 create mode 100644 packages/config/theme/interfaces.ts

diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index bae44edf0a..78572c6c4e 100644
--- a/apps/web/components/AddToHomescreen.tsx
+++ b/apps/web/components/AddToHomescreen.tsx
@@ -29,7 +29,7 @@ export default function AddToHomescreen() {
                   <path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z" />
                 </svg>
               </span>
-              <p className="text-xs font-medium text-white ltr:ml-3 rtl:mr-3">
+              <p className="text-inverted text-xs font-medium ltr:ml-3 rtl:mr-3">
                 <span className="inline">{t("add_to_homescreen")}</span>
               </p>
             </div>
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <FiX className="h-6 w-6 text-white" aria-hidden="true" />
+                <FiX className="text-inverted h-6 w-6" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/apps/web/components/AdditionalCalendarSelector.tsx b/apps/web/components/AdditionalCalendarSelector.tsx
index 30b020b679..747fe85373 100644
--- a/apps/web/components/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/AdditionalCalendarSelector.tsx
@@ -73,7 +73,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
               },
             }}
             isSearchable={false}
-            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
+            className="border-default text-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm font-medium"
             isLoading={isLoading}
             components={{ Option: ImageOption }}
           />
diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index bcef3310a3..8927679aa2 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -68,7 +68,7 @@ export default function AppListCard(props: AppListCardProps) {
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
-            <h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
+            <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
             <div className="flex items-center gap-x-2">
               {isDefault && <Badge variant="green">{t("default")}</Badge>}
               {isTemplate && <Badge variant="red">Template</Badge>}
diff --git a/apps/web/components/DestinationCalendarSelector.tsx b/apps/web/components/DestinationCalendarSelector.tsx
index d2e752dd84..941c2bb925 100644
--- a/apps/web/components/DestinationCalendarSelector.tsx
+++ b/apps/web/components/DestinationCalendarSelector.tsx
@@ -117,7 +117,7 @@ const DestinationCalendarSelector = ({
         }}
         isSearchable={false}
         className={classNames(
-          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
+          "border-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm",
           !hidePlaceholder && "font-medium"
         )}
         onChange={(option) => {
diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index c8e127b296..decc061082 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -506,7 +506,7 @@ const tabs = [
       return (
         <>
           <div>
-            <small className="flex py-4 text-gray-500">
+            <small className="text-subtle flex py-4">
               {t("place_where_cal_widget_appear", { appName: APP_NAME })}
             </small>
           </div>
@@ -531,7 +531,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
 <!-- Cal ${embedType} embed code ends -->`
             }
           />
-          <p className="hidden text-sm text-gray-500">
+          <p className="text-subtle hidden text-sm">
             {t(
               "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
             )}
@@ -558,7 +558,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
       }
       return (
         <>
-          <small className="flex py-4 text-gray-500">{t("create_update_react_component")}</small>
+          <small className="text-subtle flex py-4">{t("create_update_react_component")}</small>
           <TextArea
             data-testid="embed-react"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
@@ -619,7 +619,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <FiSun className="ml-2 h-4 w-4 text-gray-500" />
+      <FiSun className="text-subtle ml-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -631,17 +631,17 @@ const ChooseEmbedTypesDialogContent = () => {
   return (
     <DialogContent type="creation" size="lg">
       <div className="mb-4">
-        <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+        <h3 className="text-emphasis text-lg font-bold leading-6" id="modal-title">
           {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
-          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
+          <p className="text-subtle text-sm">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
         </div>
       </div>
       <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
+            className="hover:bg-subtle w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 ltr:mr-2 rtl:ml-2"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -649,11 +649,11 @@ const ChooseEmbedTypesDialogContent = () => {
                 embedType: embed.type,
               });
             }}>
-            <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
+            <div className="bg-default order-none box-border flex-none rounded-sm border border-solid">
               {embed.illustration}
             </div>
-            <div className="mt-2 font-medium text-gray-900">{embed.title}</div>
-            <p className="text-sm text-gray-500">{embed.subtitle}</p>
+            <div className="text-emphasis mt-2 font-medium">{embed.title}</div>
+            <p className="text-subtle text-sm">{embed.subtitle}</p>
           </button>
         ))}
       </div>
@@ -814,8 +814,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   return (
     <DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
       <div className="flex">
-        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
-          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
+        <div className="bg-muted flex w-1/3 flex-col p-8">
+          <h3 className="text-emphasis mb-2 flex text-xl font-bold leading-6" id="modal-title">
             <button
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
@@ -832,7 +832,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger
                   type="button"
-                  className="flex w-full items-center text-base font-medium text-gray-900">
+                  className="text-emphasis flex w-full items-center text-base font-medium">
                   <div>
                     {embedType === "inline"
                       ? "Inline Embed Customization"
@@ -843,7 +843,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <FiChevronRight
                     className={`${
                       isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
+                    } text-subtle ml-auto h-5 w-5`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="text-sm">
@@ -1010,11 +1010,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger className="flex w-full" type="button">
-                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
+                  <div className="text-emphasis  text-base font-medium">Cal Booking Customization</div>
                   <FiChevronRight
                     className={`${
                       isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
+                    } text-subtle ml-auto h-5 w-5`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent>
diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx
index 9bc0b51cce..93ab742188 100644
--- a/apps/web/components/ImageUploader.tsx
+++ b/apps/web/components/ImageUploader.tsx
@@ -123,7 +123,7 @@ export default function ImageUploader({
       <DialogContent>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
+            <h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
               {t("upload_target", { target })}
             </h3>
           </div>
@@ -131,9 +131,9 @@ export default function ImageUploader({
         <div className="mb-4">
           <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
-              <div className="flex h-20 max-h-20 w-20 items-center justify-start rounded-full bg-gray-50">
+              <div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
                 {!imageSrc && (
-                  <p className="w-full text-center text-sm text-white sm:text-xs">
+                  <p className="text-inverted w-full text-center text-sm sm:text-xs">
                     {t("no_target", { target })}
                   </p>
                 )}
@@ -144,7 +144,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
               <input
                 onInput={onInputFile}
                 type="file"
diff --git a/apps/web/components/NavTabs.tsx b/apps/web/components/NavTabs.tsx
index 06e4c30b47..70c241225c 100644
--- a/apps/web/components/NavTabs.tsx
+++ b/apps/web/components/NavTabs.tsx
@@ -69,8 +69,8 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   onClick={onClick}
                   className={classNames(
                     isCurrent
-                      ? "border-gray-900 text-gray-900"
-                      : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                      ? "text-emphasis border-gray-900"
+                      : "hover:border-default hover:text-default text-subtle border-transparent",
                     "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
                     className
                   )}
@@ -78,7 +78,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   {tab.icon && (
                     <tab.icon
                       className={classNames(
-                        isCurrent ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
+                        isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
                         "-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/App.tsx b/apps/web/components/apps/App.tsx
index 4e049d5a5f..1b1f197188 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -95,7 +95,7 @@ const Component = ({
   return (
     <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
       {hasImages && (
-        <div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
+        <div className="align-center bg-subtle mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
           {images ? (
             images.map((img) => (
               <img
@@ -119,12 +119,12 @@ const Component = ({
           <header>
             <div className="mb-4 flex items-center">
               <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
-              <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
+              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
             </div>
             <h2 className="text-sm font-medium text-gray-600">
               <Link
                 href={`categories/${categories[0]}`}
-                className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
+                className="bg-subtle rounded-md p-1 text-xs capitalize text-gray-800">
                 {categories[0]}
               </Link>{" "}
               • {t("published_by", { author })}
@@ -235,7 +235,7 @@ const Component = ({
         )}
 
         <div className="prose-sm prose mt-8">{body}</div>
-        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
+        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
         <span>
           {price === 0 ? (
             t("free_to_use_apps")
@@ -251,16 +251,16 @@ const Component = ({
           )}
         </span>
 
-        <h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
+        <h4 className="text-emphasis mt-8 mb-2 font-semibold ">{t("learn_more")}</h4>
         <ul className="prose-sm -ml-1 -mr-1 leading-5">
           {docs && (
             <li>
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="text-sm font-normal text-black no-underline hover:underline"
+                className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                <FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -270,9 +270,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -282,9 +282,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={"mailto:" + email}>
-                <FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
 
                 {email}
               </a>
@@ -295,9 +295,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -307,16 +307,16 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
           )}
         </ul>
         <hr className="my-8" />
-        <span className="leading-1 block text-xs text-gray-500">
+        <span className="leading-1 text-subtle block text-xs">
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index 008edc3195..1da2d4ea38 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -99,7 +99,7 @@ function CalendarSwitch(props: {
         }}
       />
       {!!props.destination && (
-        <span className="ml-8 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
+        <span className="bg-subtle ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
           <FiArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
@@ -177,14 +177,14 @@ function ConnectedCalendarsList(props: Props) {
                           credentialId={item.credentialId}
                           trashIcon
                           onSuccess={props.onChanged}
-                          buttonProps={{ className: "border border-gray-300" }}
+                          buttonProps={{ className: "border border-default" }}
                         />
                       </div>
                     }>
                     <div className="border-t border-gray-200">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                          <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
                           <ul className="space-y-2 px-5 py-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
@@ -218,7 +218,7 @@ function ConnectedCalendarsList(props: Props) {
                           credentialId={item.credentialId}
                           trashIcon
                           onSuccess={props.onChanged}
-                          buttonProps={{ className: "border border-gray-300" }}
+                          buttonProps={{ className: "border border-default" }}
                         />
                       </div>
                     }
@@ -279,12 +279,12 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                         </div>
                       }
                     />
-                    <div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
+                    <div className="bg-muted flex justify-between rounded-md border border-gray-200 p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
-                        <div className="relative rounded-md border border-gray-200 bg-white p-1.5">
+                        <div className="bg-default relative rounded-md border border-gray-200 p-1.5">
                           <FiCalendar className="h-8 w-8" strokeWidth="1" />
                           <FiPlus
-                            className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
+                            className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
                             strokeWidth="4"
                           />
                         </div>
diff --git a/apps/web/components/apps/DestinationCalendarSelector.tsx b/apps/web/components/apps/DestinationCalendarSelector.tsx
index bf73456fe6..b3ecdf1a78 100644
--- a/apps/web/components/apps/DestinationCalendarSelector.tsx
+++ b/apps/web/components/apps/DestinationCalendarSelector.tsx
@@ -119,7 +119,7 @@ const DestinationCalendarSelector = ({
         }}
         isSearchable={false}
         className={classNames(
-          "block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
+          "border-default block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm",
           !hidePlaceholder && "font-medium"
         )}
         onChange={(option) => {
diff --git a/apps/web/components/auth/TwoFactor.tsx b/apps/web/components/auth/TwoFactor.tsx
index 3fb4986626..7950ae2327 100644
--- a/apps/web/components/auth/TwoFactor.tsx
+++ b/apps/web/components/auth/TwoFactor.tsx
@@ -28,7 +28,7 @@ export default function TwoFactor({ center = true }) {
     <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
       <Label className="mt-4"> {t("2fa_code")}</Label>
 
-      <p className="mb-4 text-sm text-gray-500">{t("2fa_enabled_instructions")}</p>
+      <p className="text-subtle mb-4 text-sm">{t("2fa_enabled_instructions")}</p>
       <input hidden type="hidden" value={value} {...methods.register("totpCode")} />
       <div className="flex flex-row justify-between">
         <Input
diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index 374bb7a798..d95a4c8119 100644
--- a/apps/web/components/availability/SkeletonLoader.tsx
+++ b/apps/web/components/availability/SkeletonLoader.tsx
@@ -7,7 +7,7 @@ import classNames from "@lib/classNames";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:mx-0 sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index 7c98534fe7..414788b6b4 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -67,7 +67,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
         <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
           <div className="mb-6 flex items-center text-left text-base">
             <div className="mr-4">
-              <span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
+              <span className="text-bookingdarker dark:text-darkgray-800 text-emphasis font-semibold">
                 {nameOfDay(i18n.language, Number(date.format("d")), "short")}
               </span>
               <span className="text-bookinglight font-medium">
@@ -121,7 +121,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
                       <div
                         className={classNames(
-                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
+                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 bg-default mb-2 block rounded-sm border py-2 font-medium opacity-25 dark:border-transparent ",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}>
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
@@ -132,8 +132,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                         href={bookingUrl}
                         prefetch={false}
                         className={classNames(
-                          "hover:bg-brand hover:border-brand hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
-                          "dark:bg-darkgray-200 dark:hover:bg-darkmodebrand 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",
+                          "hover:bg-brand hover:border-brand-default hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
+                          "dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 bg-default mb-2 block rounded-md border py-2 text-sm font-medium dark:border-transparent",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}
                         data-testid="time">
@@ -159,7 +159,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
 
             {!isLoading && !slots.length && (
               <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
-                <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
+                <h1 className="dark:text-inverted text-emphasis my-6 text-xl">{t("all_booked_today")}</h1>
               </div>
             )}
 
diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 76411e2d75..473cefcd62 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -86,7 +86,7 @@ const BookingDescription: FC<Props> = (props) => {
       <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
         {profile.name}
       </h2>
-      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
+      <h1 className="font-cal dark:text-darkgray-900 text-emphasis mb-6 break-words text-2xl font-semibold">
         {eventType.title}
       </h1>
       <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
@@ -139,7 +139,7 @@ const BookingDescription: FC<Props> = (props) => {
                       className={classNames(
                         duration === dur.toString()
                           ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"
-                          : "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-gray-200 text-gray-900 dark:text-white",
+                          : "hover:bg-darkgray-200 dark:hover:bg-darkmodebrand hover:text-darkgray-900 dark:hover:text-darkmodebrandcontrast dark:bg-darkgray-200 bg-emphasis text-emphasis dark:text-inverted",
                         "cursor-pointer"
                       )}
                       onClick={() => {
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 01a775fbb9..a93ac87b98 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -179,7 +179,7 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
+      <div className="text-subtle ml-1 mr-8 flex" data-testid="request_reschedule_sent">
         <FiSend className="-mt-[1px] w-4 rotate-45" />
         <p className="ml-2 ">{t("reschedule_request_sent")}</p>
       </div>
@@ -255,7 +255,7 @@ function BookingListItem(booking: BookingItemProps) {
               label={
                 <>
                   {t("rejection_reason")}
-                  <span className="font-normal text-gray-500"> (Optional)</span>
+                  <span className="text-subtle font-normal"> (Optional)</span>
                 </>
               }
               value={rejectionReason}
@@ -276,13 +276,13 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="group flex flex-col hover:bg-gray-50 sm:flex-row">
+      <tr className="hover:bg-muted group flex flex-col sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>
           <div className="cursor-pointer py-4">
-            <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-            <div className="text-sm text-gray-500">
+            <div className="text-emphasis text-sm leading-6">{startTime}</div>
+            <div className="text-subtle text-sm">
               {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
               {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
               <MeetingTimeInTimezones
@@ -309,7 +309,7 @@ function BookingListItem(booking: BookingItemProps) {
               </Badge>
             )}
             {recurringDates !== undefined && (
-              <div className="mt-2 text-sm text-gray-400">
+              <div className="text-muted mt-2 text-sm">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
               </div>
             )}
@@ -319,8 +319,8 @@ function BookingListItem(booking: BookingItemProps) {
           {/* Time and Badges for mobile */}
           <div className="w-full pt-4 pb-2 sm:hidden">
             <div className="flex w-full items-center justify-between sm:hidden">
-              <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-              <div className="pr-2 text-sm text-gray-500">
+              <div className="text-emphasis text-sm leading-6">{startTime}</div>
+              <div className="text-subtle pr-2 text-sm">
                 {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
                 {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
                 <MeetingTimeInTimezones
@@ -349,7 +349,7 @@ function BookingListItem(booking: BookingItemProps) {
               </Badge>
             )}
             {recurringDates !== undefined && (
-              <div className="text-sm text-gray-400 sm:hidden">
+              <div className="text-muted text-sm sm:hidden">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
               </div>
             )}
@@ -359,7 +359,7 @@ function BookingListItem(booking: BookingItemProps) {
             <div
               title={title}
               className={classNames(
-                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
+                "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
               {title}
@@ -397,7 +397,7 @@ function BookingListItem(booking: BookingItemProps) {
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
               {isConfirmed && <TableActions actions={bookedActions} />}
-              {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
+              {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             </>
           ) : null}
           {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
@@ -456,10 +456,10 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                   </p>
                 );
               })}>
-              <div className="text-gray-600 dark:text-white">
+              <div className="dark:text-inverted text-gray-600">
                 <FiRefreshCcw
                   strokeWidth="3"
-                  className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
+                  className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
                 />
                 <p className="mt-1 pl-5 text-xs">
                   {booking.status === BookingStatus.ACCEPTED
@@ -532,13 +532,13 @@ const DisplayAttendees = ({
 }) => {
   const { t } = useLocale();
   return (
-    <div className="text-sm text-gray-900">
+    <div className="text-emphasis text-sm">
       {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
       {attendees.length > 1 ? <span>,&nbsp;</span> : <span>&nbsp;{t("and")}&nbsp;</span>}
       <Attendee {...attendees[0]} />
       {attendees.length > 1 && (
         <>
-          <div className="inline-block text-sm text-gray-900">&nbsp;{t("and")}&nbsp;</div>
+          <div className="text-emphasis inline-block text-sm">&nbsp;{t("and")}&nbsp;</div>
           {attendees.length > 2 ? (
             <Tooltip
               content={attendees.slice(1).map((attendee) => (
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index fc31685f1b..be5dbba066 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -39,11 +39,11 @@ export default function CancelBooking(props: Props) {
     <>
       {error && (
         <div className="mt-8">
-          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+          <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
             <FiX className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
-            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+            <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
               {error}
             </h3>
           </div>
@@ -51,12 +51,14 @@ export default function CancelBooking(props: Props) {
       )}
       {!error && (
         <div className="mt-5 sm:mt-6">
-          <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
+          <label className="text-bookingdark dark:text-inverted font-medium">
+            {t("cancellation_reason")}
+          </label>
           <TextArea
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="dark:bg-darkgray-100 dark:border-darkgray-400 mt-2 mb-4 w-full dark:text-white "
+            className="dark:bg-darkgray-100 dark:border-darkgray-400 dark:text-inverted mt-2 mb-4 w-full "
             rows={3}
           />
           <div className="flex flex-col-reverse rtl:space-x-reverse ">
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index 3ed1e22537..c3580ab1a4 100644
--- a/apps/web/components/booking/SkeletonLoader.tsx
+++ b/apps/web/components/booking/SkeletonLoader.tsx
@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
diff --git a/apps/web/components/booking/TimezoneDropdown.tsx b/apps/web/components/booking/TimezoneDropdown.tsx
index dcffd1904c..28677048b9 100644
--- a/apps/web/components/booking/TimezoneDropdown.tsx
+++ b/apps/web/components/booking/TimezoneDropdown.tsx
@@ -17,7 +17,7 @@ export function TimezoneDropdown({
 
   return (
     <>
-      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
+      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 focus-within:bg-emphasis hover:bg-subtle [&_svg]:focus-within:text-emphasis [&_p]:focus-within:text-emphasis dark:[&_svg]:focus-within:text-inverted dark:[&_p]:focus-within:text-inverted -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium lg:max-w-[12rem]">
         <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
         <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
       </div>
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 7ba03a4e71..086a13e204 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -159,7 +159,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
               className={classNames(
                 isBackgroundTransparent
                   ? ""
-                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
+                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-default pb-4 md:pb-0",
                 "border-bookinglightest md:rounded-md md:border",
                 isEmbed && "mx-auto"
               )}>
@@ -183,7 +183,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                               type="number"
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
+                              className="w-15 dark:bg-darkgray-200 border-default bg-default h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
@@ -219,8 +219,8 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                         data-testid="former_time_p_desktop">
                         {t("former_time")}
                       </p>
-                      <p className="text-gray-500 line-through dark:text-darkgray-600">
-                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+                      <p className="text-subtle line-through dark:text-darkgray-600">
+                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-subtle" />
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
                     </div>
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index a0873bc9e1..baaee62cc5 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -482,7 +482,7 @@ const BookingPage = ({
         <div
           className={classNames(
             "main",
-            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-white dark:border",
+            isBackgroundTransparent ? "" : "dark:bg-darkgray-100 bg-default dark:border",
             "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">
@@ -491,7 +491,7 @@ const BookingPage = ({
                 <BookingDescription isBookingPage profile={profile} eventType={eventType}>
                   <BookingDescriptionPayment eventType={eventType} />
                   {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                    <div className="items-start text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="dark:text-inverted items-start text-sm font-medium text-gray-600">
                       <FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                       <p className="-ml-2 inline-block items-center px-2">
                         {getEveryFreqFor({
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 2f662f3df6..40f90300d3 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -161,7 +161,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
       return (
         <div>
-          <label htmlFor="locationInput" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="locationInput" className="text-default block text-sm font-medium">
             {t(eventLocationType.messageForOrganizer || "")}
           </label>
           <div className="mt-1">
@@ -171,7 +171,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
-              className="block w-full rounded-sm border-gray-300 text-sm"
+              className="border-default block w-full rounded-sm text-sm"
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
                 defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
@@ -219,11 +219,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
           </div>
           <div className="w-full">
             <div className="mt-3 text-center sm:mt-0 sm:text-left">
-              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+              <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
                 {t("edit_location")}
               </h3>
               {!booking && (
-                <p className="text-sm text-gray-400">
+                <p className="text-muted text-sm">
                   <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
                     Can&apos;t find the right video app? Visit our
                     <Link className="cursor-pointer text-blue-500 underline" href="/apps/categories/video">
@@ -238,8 +238,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
             {booking && (
               <>
-                <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-                <p className="mb-2 ml-1 text-sm text-black">
+                <p className="text-emphasis mt-6 mb-2 ml-1 text-sm font-bold">{t("current_location")}:</p>
+                <p className="text-emphasis mb-2 ml-1 text-sm">
                   {getHumanReadableLocationValue(booking.location, t)}
                 </p>
               </>
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index efbf219027..bdb6e9368c 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -48,10 +48,10 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
-            <p className="text-sm text-gray-500">{t("reschedule_modal_description")}</p>
-            <p className="mt-6 mb-2 text-sm font-bold text-black">
+            <p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
+            <p className="text-emphasis mt-6 mb-2 text-sm font-bold">
               {t("reason_for_reschedule_request")}
-              <span className="font-normal text-gray-500"> (Optional)</span>
+              <span className="text-subtle font-normal"> (Optional)</span>
             </p>
             <TextArea
               data-testid="reschedule_reason"
diff --git a/apps/web/components/error/error-page.tsx b/apps/web/components/error/error-page.tsx
index 7d5f25fb37..6edcea2ab2 100644
--- a/apps/web/components/error/error-page.tsx
+++ b/apps/web/components/error/error-page.tsx
@@ -29,15 +29,15 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (
   ];
 
   return (
-    <div className="overflow-hidden bg-white shadow sm:rounded-lg">
+    <div className="bg-default overflow-hidden shadow sm:rounded-lg">
       <div className="border-t border-gray-200 px-4 py-5 sm:p-0">
         <dl className="sm:divide-y sm:divide-gray-200">
           {debugMap.map(([key, value]) => {
             if (value !== undefined) {
               return (
                 <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-                  <dt className="text-sm font-bold text-black">{key}</dt>
-                  <dd className="mt-1 text-sm text-black sm:col-span-2 sm:mt-0">{value}</dd>
+                  <dt className="text-emphasis text-sm font-bold">{key}</dt>
+                  <dd className="text-emphasis mt-1 text-sm sm:col-span-2 sm:mt-0">{value}</dd>
                 </div>
               );
             }
@@ -53,11 +53,11 @@ export const ErrorPage: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="min-h-screen bg-white px-4">
+      <div className="bg-default min-h-screen px-4">
         <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
           <div className="text-center">
-            <p className="text-sm font-semibold uppercase tracking-wide text-black">{statusCode}</p>
-            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
+            <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{statusCode}</p>
+            <h1 className="text-emphasis mt-2 text-4xl font-extrabold tracking-tight sm:text-5xl">
               {message}
             </h1>
           </div>
diff --git a/apps/web/components/eventtype/AvailabilityTab.tsx b/apps/web/components/eventtype/AvailabilityTab.tsx
index 52dcd3c121..b68f702b55 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -123,10 +123,7 @@ const EventTypeScheduleDetails = () => {
           return (
             <li key={day} className="my-6 flex border-transparent last:mb-2">
               <span
-                className={classNames(
-                  "w-20 font-medium sm:w-32",
-                  !isAvailable && "text-gray-500 opacity-50"
-                )}>
+                className={classNames("w-20 font-medium sm:w-32", !isAvailable && "text-subtle opacity-50")}>
                 {day}
               </span>
               {isLoading ? (
@@ -144,7 +141,7 @@ const EventTypeScheduleDetails = () => {
                   ))}
                 </div>
               ) : (
-                <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
+                <span className="text-subtle ml-6 opacity-50 sm:ml-0">{t("unavailable")}</span>
               )}
             </li>
           );
@@ -177,7 +174,7 @@ const EventTypeSchedule = () => {
   return (
     <div className="space-y-4">
       <div>
-        <label htmlFor="availability" className="mb-2 block text-sm font-medium leading-none text-gray-700">
+        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
           {t("availability")}
         </label>
         <Controller
diff --git a/apps/web/components/eventtype/CustomEventTypeModal.tsx b/apps/web/components/eventtype/CustomEventTypeModal.tsx
index 8ee5c02ea0..82309d29c3 100644
--- a/apps/web/components/eventtype/CustomEventTypeModal.tsx
+++ b/apps/web/components/eventtype/CustomEventTypeModal.tsx
@@ -58,23 +58,23 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
         className="mb-0"
       />
       <div className="pt-6 text-sm">
-        <div className="mb-6 rounded-md bg-gray-100 p-2">
-          <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
+        <div className="bg-subtle mb-6 rounded-md p-2">
+          <h1 className="text-emphasis mb-2 ml-1 font-medium">{t("available_variables")}</h1>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
-            <p className="text-gray-900">{t("event_name_info")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Event type title}`}</p>
+            <p className="text-emphasis">{t("event_name_info")}</p>
           </div>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
-            <p className="text-gray-900">{t("your_full_name")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Organiser}`}</p>
+            <p className="text-emphasis">{t("your_full_name")}</p>
           </div>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
-            <p className="text-gray-900">{t("scheduler_full_name")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Scheduler}`}</p>
+            <p className="text-emphasis">{t("scheduler_full_name")}</p>
           </div>
           <div className="mb-1 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
-            <p className="text-gray-900">{t("location_info")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Location}`}</p>
+            <p className="text-emphasis">{t("location_info")}</p>
           </div>
         </div>
         <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
@@ -84,8 +84,8 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
             backgroundImage: "url(/calendar-preview.svg)",
           }}>
           <div className="m-auto flex items-center justify-center self-stretch">
-            <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
-              <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">{previewText}</p>
+            <div className="bg-subtle mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black text-[12px] leading-3">
+              <p className="text-emphasis overflow-hidden text-ellipsis p-1.5 font-medium">{previewText}</p>
               <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
             </div>
           </div>
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index b8bf84a2ad..08a819bc42 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -99,7 +99,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             <Link
               href="/apps/categories/calendar"
               target="_blank"
-              className="text-sm text-gray-600 hover:text-gray-900">
+              className="hover:text-emphasis text-sm text-gray-600">
               {t("add_another_calendar")}
             </Link>
           </div>
@@ -134,7 +134,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               StartIcon={FiEdit}
               variant="icon"
               color="minimal"
-              className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
+              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
               onClick={() => setShowEventNameTip((old) => !old)}
               aria-label="edit custom name"
             />
@@ -248,7 +248,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                       showToast(t("enabled_after_update_description"), "warning");
                     }
                   }}
-                  className="hover:stroke-3 hover:bg-transparent hover:text-black"
+                  className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
                   type="button">
                   <FiCopy />
                 </Button>
diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index 725a3f0a4f..c279585322 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -84,7 +84,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
       </div>
       <div>
         {!isLoading && notInstalledApps?.length ? (
-          <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">Available Apps</h2>
+          <h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">Available Apps</h2>
         ) : null}
         <div className="before:border-0">
           {notInstalledApps?.map((app) => (
diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
index ffa7ba5e14..f44c6f0bb4 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -290,7 +290,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                     <RadioGroup.Item
                       id={period.type}
                       value={period.type}
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
                     {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
@@ -298,14 +298,14 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                       <div className="flex h-9">
                         <Input
                           type="number"
-                          className="block w-16 rounded-md border-gray-300 py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                          className="border-default block w-16 rounded-md py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                           placeholder="30"
                           {...formMethods.register("periodDays", { valueAsNumber: true })}
                           defaultValue={eventType.periodDays || 30}
                         />
                         <select
                           id=""
-                          className="block h-9 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                          className="border-default block h-9 w-full rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
                           {...formMethods.register("periodCountCalendarDays")}
                           defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                           <option value="1">{t("calendar_days")}</option>
@@ -405,7 +405,7 @@ const BookingLimits = () => {
                       <Input
                         id={`${bookingLimitKey}-limit`}
                         type="number"
-                        className="mb-0 block w-16 rounded-md border-gray-300 text-sm  [appearance:textfield]"
+                        className="border-default mb-0 block w-16 rounded-md text-sm  [appearance:textfield]"
                         placeholder="1"
                         min={1}
                         defaultValue={bookingAmount}
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index c63efe92a0..6cee906389 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -199,7 +199,7 @@ export const EventSetupTab = (
               return (
                 <li
                   key={`${location.type}${index}`}
-                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
+                  className="border-default mb-2 rounded-md border py-1.5 px-2">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
@@ -221,11 +221,11 @@ export const EventSetupTab = (
                           openLocationModal(location.type);
                         }}
                         aria-label={t("edit")}
-                        className="mr-1 p-1 text-gray-500 hover:text-gray-900">
+                        className="hover:text-emphasis text-subtle mr-1 p-1">
                         <FiEdit2 className="h-4 w-4" />
                       </button>
                       <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
+                        <FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
                       </button>
                     </div>
                   </div>
diff --git a/apps/web/components/eventtype/EventTeamTab.tsx b/apps/web/components/eventtype/EventTeamTab.tsx
index 97409da13d..e377537f4f 100644
--- a/apps/web/components/eventtype/EventTeamTab.tsx
+++ b/apps/web/components/eventtype/EventTeamTab.tsx
@@ -52,7 +52,7 @@ const CheckedHostField = ({
   options?: Options<CheckedSelectOption>;
 } & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
   return (
-    <div className="flex flex-col space-y-5 bg-gray-50 p-4">
+    <div className="bg-muted flex flex-col space-y-5 p-4">
       <div>
         <Label>{labelText}</Label>
         <CheckedTeamSelect
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index ffeb9b4fa9..8f00011de5 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -197,7 +197,7 @@ function EventTypeSingleLayout({
       heading={eventType.title}
       CTA={
         <div className="flex items-center justify-end">
-          <div className="hidden items-center rounded-md px-2 sm:hover:bg-gray-100 lg:flex">
+          <div className="sm:hover:bg-subtle hidden items-center rounded-md px-2 lg:flex">
             <Skeleton
               as={Label}
               htmlFor="hiddenSwitch"
@@ -215,7 +215,7 @@ function EventTypeSingleLayout({
           <VerticalDivider className="hidden lg:block" />
 
           {/* TODO: Figure out why combined isnt working - works in storybook */}
-          <ButtonGroup combined containerProps={{ className: "border-gray-300 hidden lg:flex" }}>
+          <ButtonGroup combined containerProps={{ className: "border-default hidden lg:flex" }}>
             {/* We have to warp this in tooltip as it has a href which disabels the tooltip on buttons */}
             <Tooltip content={t("preview")}>
               <Button
@@ -295,7 +295,7 @@ function EventTypeSingleLayout({
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <div className="flex h-9 flex-row items-center justify-between py-2 px-4 sm:hover:bg-gray-100">
+              <div className="sm:hover:bg-subtle flex h-9 flex-row items-center justify-between py-2 px-4">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
@@ -312,7 +312,7 @@ function EventTypeSingleLayout({
               </div>
             </DropdownMenuContent>
           </Dropdown>
-          <div className="border-l-2 border-gray-300" />
+          <div className="border-default border-l-2" />
           <Button
             className="ml-4 lg:ml-0"
             type="submit"
@@ -339,7 +339,7 @@ function EventTypeSingleLayout({
           <div className="w-full ltr:mr-2 rtl:ml-2">
             <div
               className={classNames(
-                "mt-4 rounded-md  border-gray-200 bg-white sm:mx-0 xl:mt-0",
+                "bg-default mt-4  rounded-md border-gray-200 sm:mx-0 xl:mt-0",
                 disableBorder ? "border-0 " : "p-2 md:border md:p-6"
               )}>
               {children}
diff --git a/apps/web/components/eventtype/RecurringEventController.tsx b/apps/web/components/eventtype/RecurringEventController.tsx
index aa590ae88e..915cb0ef1f 100644
--- a/apps/web/components/eventtype/RecurringEventController.tsx
+++ b/apps/web/components/eventtype/RecurringEventController.tsx
@@ -57,12 +57,12 @@ export default function RecurringEventController({
               {recurringEventState && (
                 <div data-testid="recurring-event-collapsible" className="text-sm">
                   <div className="flex items-center">
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
                     <input
                       type="number"
                       min="1"
                       max="20"
-                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="border-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                       defaultValue={recurringEventState.interval}
                       onChange={(event) => {
                         const newVal = {
@@ -89,12 +89,12 @@ export default function RecurringEventController({
                     />
                   </div>
                   <div className="mt-4 flex items-center">
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
                     <input
                       type="number"
                       min="1"
                       max="20"
-                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="border-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                       defaultValue={recurringEventState.count}
                       onChange={(event) => {
                         const newVal = {
@@ -105,7 +105,7 @@ export default function RecurringEventController({
                         setRecurringEventState(newVal);
                       }}
                     />
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">
                       {t("events", {
                         count: recurringEventState.count,
                       })}
diff --git a/apps/web/components/eventtype/RequiresConfirmationController.tsx b/apps/web/components/eventtype/RequiresConfirmationController.tsx
index f2e78a7e1d..ca9058b513 100644
--- a/apps/web/components/eventtype/RequiresConfirmationController.tsx
+++ b/apps/web/components/eventtype/RequiresConfirmationController.tsx
@@ -82,7 +82,7 @@ export default function RequiresConfirmationController({
                     <RadioGroup.Item
                       id="always"
                       value="always"
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
                     <Label htmlFor="always" className="!m-0 flex items-center">
@@ -93,7 +93,7 @@ export default function RequiresConfirmationController({
                     <RadioGroup.Item
                       id="notice"
                       value="notice"
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
                     <Label htmlFor="notice" className="!m-0 flex items-center">
@@ -116,7 +116,7 @@ export default function RequiresConfirmationController({
                                   });
                                   formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
                                 }}
-                                className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
+                                className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
                                 defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
                               />
                               <select
@@ -130,7 +130,7 @@ export default function RequiresConfirmationController({
                                   });
                                   formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
                                 }}
-                                className="ml-2 block h-9 rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                                className="border-default ml-2 block h-9 rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
                                 defaultValue={
                                   metadata?.requiresConfirmationThreshold?.unit ||
                                   defaultRequiresConfirmationSetup.unit
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 769ef377a2..3793db841f 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -11,7 +11,7 @@ function SkeletonLoader() {
           <SkeletonText className="h-4 w-24" />
         </div>
       </div>
-      <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-default sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
diff --git a/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx b/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
index 2fbb4d2cd4..c61866a316 100644
--- a/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
+++ b/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
@@ -28,14 +28,14 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
           <p className="font-sans text-sm font-bold leading-5">
             {name}
             {/* Temporarily removed till we use it on another place */}
-            {/* <span className="mx-1 rounded-[4px] bg-green-100 py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
+            {/* <span className="mx-1 rounded-[4px] bg-success py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
               {t("default")}
             </span> */}
           </p>
           <div className="fle-row flex">
             <span
               title={externalId}
-              className="max-w-44 mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm text-gray-500">
+              className="max-w-44 text-subtle mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm">
               {externalId}{" "}
             </span>
           </div>
diff --git a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
index 5aa3edffa3..10709a404c 100644
--- a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
+++ b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
@@ -17,7 +17,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-gray-700">
+          <label htmlFor="createEventsOn" className="text-default flex text-sm font-medium">
             {t("create_events_on")}
           </label>
           <div className="mt-2">
diff --git a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
index 41158b521c..82679003a4 100644
--- a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
@@ -33,7 +33,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         firstCalendar.integration.title &&
         firstCalendar.integration.imageSrc && (
           <>
-            <List className="rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+            <List className="bg-default rounded-md border border-gray-200 p-0 dark:bg-black">
               <ConnectedCalendarItem
                 key={firstCalendar.integration.title}
                 name={firstCalendar.integration.title}
@@ -49,13 +49,13 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
             </List>
             {/* Create event on selected calendar */}
             <CreateEventsOnCalendarSelect calendar={destinationCalendar} />
-            <p className="mt-4 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
+            <p className="text-subtle mt-4 text-sm">{t("connect_calendars_from_app_store")}</p>
           </>
         )}
 
       {/* Connect calendars list */}
       {firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
-        <List className="mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black sm:mx-0">
+        <List className="bg-default mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 p-0 dark:bg-black sm:mx-0">
           {queryIntegrations.data &&
             queryIntegrations.data.items.map((item) => (
               <li key={item.title}>
@@ -73,7 +73,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
       )}
 
       {queryIntegrations.isLoading && (
-        <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+        <ul className="bg-default divide-y divide-gray-200 rounded-md border border-gray-200 p-0 dark:bg-black">
           {[0, 0, 0, 0].map((_item, index) => {
             return (
               <li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
@@ -89,7 +89,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         type="button"
         data-testid="save-calendar-button"
         className={classNames(
-          "mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white",
+          "text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm",
           disabledNextButton ? "cursor-not-allowed opacity-20" : ""
         )}
         onClick={() => nextStep()}
diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
index 38a3a8675b..3abfee66af 100644
--- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
@@ -50,7 +50,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
   const updateSchedule = trpc.viewer.availability.schedule.update.useMutation(mutationOptions);
   return (
     <Form
-      className="w-full bg-white text-black dark:bg-opacity-5 dark:text-white"
+      className="bg-default dark:text-inverted text-emphasis w-full dark:bg-opacity-5"
       form={availabilityForm}
       handleSubmit={async (values) => {
         try {
diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index db45f9a3f8..ba144f83a7 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -117,7 +117,7 @@ const UserProfile = (props: IUserProfileProps) => {
           name="avatar"
           id="avatar"
           placeholder="URL"
-          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
+          className="border-default mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
           defaultValue={imageSrc}
         />
         <div className="flex items-center px-4">
@@ -142,19 +142,19 @@ const UserProfile = (props: IUserProfileProps) => {
         </div>
       </div>
       <fieldset className="mt-8">
-        <Label className="mb-2 block text-sm font-medium text-gray-700">{t("about")}</Label>
+        <Label className="text-default mb-2 block text-sm font-medium">{t("about")}</Label>
         <Editor
           getText={() => md.render(getValues("bio") || user?.bio || "")}
           setText={(value: string) => setValue("bio", turndown(value))}
           excludedToolbarItems={["blockType"]}
         />
-        <p className="mt-2 font-sans text-sm font-normal text-gray-600 dark:text-white">
+        <p className="dark:text-inverted mt-2 font-sans text-sm font-normal text-gray-600">
           {t("few_sentences_about_yourself")}
         </p>
       </fieldset>
       <Button
         type="submit"
-        className="mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white">
+        className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
         {t("finish")}
         <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index 6a0ab4a5ef..0b3e70d17f 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -63,7 +63,7 @@ const UserSettings = (props: IUserSettingsProps) => {
 
         {/* Full name textfield */}
         <div className="w-full">
-          <label htmlFor="name" className="mb-2 block text-sm font-medium text-gray-700">
+          <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
             {t("full_name")}
           </label>
           <input
@@ -73,7 +73,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             type="text"
             autoComplete="off"
             autoCorrect="off"
-            className="w-full rounded-md border border-gray-300 text-sm"
+            className="border-default w-full rounded-md border text-sm"
           />
           {errors.name && (
             <p data-testid="required" className="py-2 text-xs text-red-500">
@@ -83,7 +83,7 @@ const UserSettings = (props: IUserSettingsProps) => {
         </div>
         {/* Timezone select field */}
         <div className="w-full">
-          <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="timeZone" className="text-default block text-sm font-medium">
             {t("timezone")}
           </label>
 
@@ -94,7 +94,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             className="mt-2 w-full rounded-md text-sm"
           />
 
-          <p className="mt-3 flex flex-row font-sans text-xs leading-tight text-gray-500 dark:text-white">
+          <p className="text-subtle dark:text-inverted mt-3 flex flex-row font-sans text-xs leading-tight">
             {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
           </p>
         </div>
diff --git a/apps/web/components/layouts/WizardLayout.tsx b/apps/web/components/layouts/WizardLayout.tsx
index 58af085b29..34be870e4b 100644
--- a/apps/web/components/layouts/WizardLayout.tsx
+++ b/apps/web/components/layouts/WizardLayout.tsx
@@ -24,7 +24,9 @@ export default function WizardLayout({
   }, [router.asPath]);
 
   return (
-    <div className="dark:bg-brand dark:text-brand-contrast min-h-screen text-black" data-testid="onboarding">
+    <div
+      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen"
+      data-testid="onboarding">
       <div>
         <Toaster position="bottom-right" />
       </div>
@@ -34,7 +36,7 @@ export default function WizardLayout({
             <div className="mx-auto sm:max-w-[520px]">
               <header>
                 <p className="font-cal mb-3 text-[28px] font-medium leading-7">{title}&nbsp;</p>
-                <p className="font-sans text-sm font-normal text-gray-500">{subtitle}&nbsp;</p>
+                <p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>
               </header>
               <Steps maxSteps={maxSteps} currentStep={currentStep} navigateToStep={noop} />
             </div>
diff --git a/apps/web/components/security/ChangePasswordSection.tsx b/apps/web/components/security/ChangePasswordSection.tsx
index e64d68285a..5c8fb8098a 100644
--- a/apps/web/components/security/ChangePasswordSection.tsx
+++ b/apps/web/components/security/ChangePasswordSection.tsx
@@ -62,11 +62,11 @@ const ChangePasswordSection = () => {
       <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
         <div className="py-6 lg:pb-5">
           <div className="my-3">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("change_password")}</h2>
           </div>
           <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
             <div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
-              <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="current_password" className="text-default block text-sm font-medium">
                 {t("current_password")}
               </label>
               <div className="mt-1">
@@ -77,13 +77,13 @@ const ChangePasswordSection = () => {
                   name="current_password"
                   id="current_password"
                   required
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                   placeholder={t("your_old_password")}
                 />
               </div>
             </div>
             <div className="w-full sm:w-1/2">
-              <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="new_password" className="text-default block text-sm font-medium">
                 {t("new_password")}
               </label>
               <div className="mt-1">
@@ -94,7 +94,7 @@ const ChangePasswordSection = () => {
                   value={newPassword}
                   required
                   onInput={(e) => setNewPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                   placeholder={t("super_secure_new_password")}
                 />
               </div>
diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx
index 4ec16a1446..03acbc19f0 100644
--- a/apps/web/components/security/DisableTwoFactorModal.tsx
+++ b/apps/web/components/security/DisableTwoFactorModal.tsx
@@ -70,10 +70,10 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
           <div className="mb-4">
             <PasswordField
               labelProps={{
-                className: "block text-sm font-medium text-gray-700",
+                className: "block text-sm font-medium text-default",
               }}
               {...form.register("password")}
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+              className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
             />
             <Label className="mt-4"> {t("2fa_code")}</Label>
 
diff --git a/apps/web/components/security/DisableUserImpersonation.tsx b/apps/web/components/security/DisableUserImpersonation.tsx
index fcb540e8d2..62c4ae5ea0 100644
--- a/apps/web/components/security/DisableUserImpersonation.tsx
+++ b/apps/web/components/security/DisableUserImpersonation.tsx
@@ -22,14 +22,14 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
       <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">
               {t("user_impersonation_heading")}
             </h2>
             <Badge className="ml-2 text-xs" variant={!disableImpersonation ? "success" : "gray"}>
               {!disableImpersonation ? t("enabled") : t("disabled")}
             </Badge>
           </div>
-          <p className="mt-1 text-sm text-gray-500">{t("user_impersonation_description")}</p>
+          <p className="text-subtle mt-1 text-sm">{t("user_impersonation_description")}</p>
         </div>
         <div className="mt-5 sm:mt-0 sm:self-center">
           <Button
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index ba787152a7..59a231d7e1 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -135,7 +135,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
         <WithStep step={SetupStep.ConfirmPassword} current={step}>
           <form onSubmit={handleSetup}>
             <div className="mb-4">
-              <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
+              <label htmlFor="password" className="text-default mt-4 block text-sm font-medium">
                 {t("password")}
               </label>
               <div className="mt-1">
@@ -146,7 +146,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   required
                   value={password}
                   onInput={(e) => setPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                 />
               </div>
 
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index 05cf9e6882..f4bb6bba5c 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -17,12 +17,12 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
       <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("2fa")}</h2>
             <Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
               {enabled ? t("enabled") : t("disabled")}
             </Badge>
           </div>
-          <p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
+          <p className="text-subtle mt-1 text-sm">{t("add_an_extra_layer_of_security")}</p>
         </div>
         <div className="mt-5 sm:mt-0 sm:self-center">
           <Button
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index d339af60bc..4a0dc65ff7 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -4,13 +4,13 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <FiShield className="h-6 w-6 text-white" />
+        <FiShield className="text-inverted h-6 w-6" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-        <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
+        <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
           {title}
         </h3>
-        <p className="text-sm text-gray-400">{description}</p>
+        <p className="text-muted text-sm">{description}</p>
       </div>
     </div>
   );
diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index 26c8636a4f..587c1cd87d 100644
--- a/apps/web/components/settings/DisableTwoFactorModal.tsx
+++ b/apps/web/components/settings/DisableTwoFactorModal.tsx
@@ -77,10 +77,10 @@ const DisableTwoFactorAuthModal = ({
           <div className="mb-4">
             <PasswordField
               labelProps={{
-                className: "block text-sm font-medium text-gray-700",
+                className: "block text-sm font-medium text-default",
               }}
               {...form.register("password")}
-              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+              className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
             />
             <Label className="mt-4"> {t("2fa_code")}</Label>
 
diff --git a/apps/web/components/setup/AdminUser.tsx b/apps/web/components/setup/AdminUser.tsx
index 7c213581b3..9fe124b803 100644
--- a/apps/web/components/setup/AdminUser.tsx
+++ b/apps/web/components/setup/AdminUser.tsx
@@ -111,7 +111,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
                 <Label htmlFor="username" className={classNames(longWebsiteUrl && "mb-0")}>
                   <span className="block">{t("username")}</span>
                   {longWebsiteUrl && (
-                    <small className="items-centerpx-3 mt-2 inline-flex rounded-t-md border border-b-0 border-gray-300 bg-gray-100 py-1 px-3 text-gray-500">
+                    <small className="items-centerpx-3 bg-subtle border-default text-subtle mt-2 inline-flex rounded-t-md border border-b-0 py-1 px-3">
                       {process.env.NEXT_PUBLIC_WEBSITE_URL}
                     </small>
                   )}
@@ -119,7 +119,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
                 <TextField
                   addOnLeading={
                     !longWebsiteUrl && (
-                      <span className="inline-flex items-center rounded-none px-3 text-sm text-gray-500">
+                      <span className="text-subtle inline-flex items-center rounded-none px-3 text-sm">
                         {process.env.NEXT_PUBLIC_WEBSITE_URL}/
                       </span>
                     )
diff --git a/apps/web/components/setup/ChooseLicense.tsx b/apps/web/components/setup/ChooseLicense.tsx
index 6bff44d40b..f713347081 100644
--- a/apps/web/components/setup/ChooseLicense.tsx
+++ b/apps/web/components/setup/ChooseLicense.tsx
@@ -37,13 +37,13 @@ const ChooseLicense = (
         <RadioGroup.Item value="FREE">
           <div
             className={classNames(
-              "cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
+              "bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
-            <h2 className="font-cal text-xl text-black">{t("agplv3_license")}</h2>
+            <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
             <p className="font-medium text-green-800">{t("free_license_fee")}</p>
-            <p className="text-gray-500">{t("forever_open_and_free")}</p>
-            <ul className="ml-4 list-disc text-left text-xs text-gray-500">
+            <p className="text-subtle">{t("forever_open_and_free")}</p>
+            <ul className="text-subtle ml-4 list-disc text-left text-xs">
               <li>{t("required_to_keep_your_code_open_source")}</li>
               <li>{t("cannot_repackage_and_resell")}</li>
               <li>{t("no_enterprise_features")}</li>
@@ -53,15 +53,15 @@ const ChooseLicense = (
         <RadioGroup.Item value="EE">
           <div
             className={classNames(
-              "cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
+              "bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
               value === "EE" && "ring-2 ring-black"
             )}>
-            <h2 className="font-cal text-xl text-black">{t("ee_enterprise_license")}</h2>
+            <h2 className="font-cal text-emphasis text-xl">{t("ee_enterprise_license")}</h2>
             <p className="font-medium text-green-800">
               {t("enterprise_booking_fee", { enterprise_booking_fee: ENTERPRISE_BOOKING_FEE })}
             </p>
-            <p className="text-gray-500">{t("enterprise_license_includes")}</p>
-            <ul className="ml-4 list-disc text-left text-xs text-gray-500">
+            <p className="text-subtle">{t("enterprise_license_includes")}</p>
+            <ul className="text-subtle ml-4 list-disc text-left text-xs">
               <li>{t("no_need_to_keep_your_code_open_source")}</li>
               <li>{t("repackage_rebrand_resell")}</li>
               <li>{t("a_vast_suite_of_enterprise_features")}</li>
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx
index 4f596891da..25e9e6dd6a 100644
--- a/apps/web/components/setup/EnterpriseLicense.tsx
+++ b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -87,7 +87,7 @@ const EnterpriseLicense = (
 
   return (
     <FormProvider {...formMethods}>
-      <form {...rest} className="space-y-4 rounded-md bg-white px-8 py-10" onSubmit={handleSubmit}>
+      <form {...rest} className="bg-default space-y-4 rounded-md px-8 py-10" onSubmit={handleSubmit}>
         <div>
           <Button
             className="w-full justify-center text-lg"
@@ -98,7 +98,7 @@ const EnterpriseLicense = (
           </Button>
           <div className="relative flex justify-center">
             <hr className="my-8 w-full border-[1.5px] border-gray-200" />
-            <span className="absolute mt-[22px] bg-white px-3.5 text-sm">OR</span>
+            <span className="bg-default absolute mt-[22px] px-3.5 text-sm">OR</span>
           </div>
           {t("already_have_key")}
           <Controller
@@ -108,7 +108,7 @@ const EnterpriseLicense = (
               <TextField
                 {...formMethods.register("licenseKey")}
                 className={classNames(
-                  "mb-0 group-hover:border-gray-400",
+                  "group-hover:border-emphasis mb-0",
                   (checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
                 )}
                 placeholder="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
@@ -116,8 +116,8 @@ const EnterpriseLicense = (
                 value={value}
                 addOnFilled={false}
                 addOnClassname={classNames(
-                  "hover:border-gray-300",
-                  errors.licenseKey === undefined && isDirty && "group-hover:border-gray-400"
+                  "hover:border-default",
+                  errors.licenseKey === undefined && isDirty && "group-hover:border-emphasis"
                 )}
                 addOnSuffix={
                   checkLicenseLoading ? (
diff --git a/apps/web/components/setup/StepDone.tsx b/apps/web/components/setup/StepDone.tsx
index c4ca401efa..157076ec80 100644
--- a/apps/web/components/setup/StepDone.tsx
+++ b/apps/web/components/setup/StepDone.tsx
@@ -23,8 +23,8 @@ const StepDone = (props: {
         router.replace(props.nextStepPath);
       }}>
       <div className="min-h-36 my-6 flex flex-col items-center justify-center">
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
-          <FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
+        <div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
+          <FiCheck className="text-inverted dark:bg-default inline-block h-10 w-10 dark:text-gray-600" />
         </div>
         <div className="max-w-[420px] text-center">
           <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index 0633bae939..ae720fbc1c 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -17,19 +17,19 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
 
   return (
     <Link key={member.id} href={`/${member.username}`}>
-      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4 hover:cursor-pointer hover:bg-gray-50 ">
+      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 bg-default hover:bg-muted group flex min-h-full flex-col space-y-2 rounded-md p-4 hover:cursor-pointer ">
         <Avatar
           size="md"
           alt={member.name || ""}
           imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
         />
         <section className="line-clamp-4 mt-2 w-full space-y-1">
-          <p className="font-medium text-gray-900 dark:text-white">{member.name}</p>
-          <div className="line-clamp-3 overflow-ellipsis text-sm font-normal text-gray-500 dark:text-white">
+          <p className="text-emphasis dark:text-inverted font-medium">{member.name}</p>
+          <div className="line-clamp-3 text-subtle dark:text-inverted overflow-ellipsis text-sm font-normal">
             {!isBioEmpty ? (
               <>
                 <div
-                  className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="dark:text-darkgray-600 text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
                 />
               </>
diff --git a/apps/web/components/ui/AuthContainer.tsx b/apps/web/components/ui/AuthContainer.tsx
index c153081b3a..242f144076 100644
--- a/apps/web/components/ui/AuthContainer.tsx
+++ b/apps/web/components/ui/AuthContainer.tsx
@@ -24,15 +24,15 @@ 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-gray-900">{props.heading}</h2>}
+        {props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}
       </div>
       {props.loading && (
-        <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
+        <div className="bg-muted absolute z-50 flex h-screen w-full items-center">
           <Loader />
         </div>
       )}
       <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="mx-2 rounded-md border border-gray-200 bg-white px-4 py-10 sm:px-10">
+        <div className="bg-default mx-2 rounded-md border border-gray-200 px-4 py-10 sm:px-10">
           {props.children}
         </div>
         <div className="mt-8 text-center text-sm text-gray-600">{props.footerText}</div>
diff --git a/apps/web/components/ui/EditableHeading.tsx b/apps/web/components/ui/EditableHeading.tsx
index fa57a8e428..1ff6c355ee 100644
--- a/apps/web/components/ui/EditableHeading.tsx
+++ b/apps/web/components/ui/EditableHeading.tsx
@@ -21,7 +21,7 @@ const EditableHeading = function EditableHeading({
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
           {!isEditing && isReady && (
-            <FiEdit2 className=" ml-1 -mt-px inline h-3 w-3  text-gray-500 group-hover:text-gray-500" />
+            <FiEdit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
           )}
           <input
             {...passThroughProps}
@@ -29,7 +29,7 @@ const EditableHeading = function EditableHeading({
             value={value}
             required
             className={classNames(
-              "absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
+              "text-emphasis hover:text-default focus:text-emphasis absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl focus:outline-none focus:ring-0"
             )}
             onFocus={(e) => {
               setIsEditing(true);
diff --git a/apps/web/components/ui/InfoBadge.tsx b/apps/web/components/ui/InfoBadge.tsx
index 58be50bbca..878f64d8f8 100644
--- a/apps/web/components/ui/InfoBadge.tsx
+++ b/apps/web/components/ui/InfoBadge.tsx
@@ -6,7 +6,7 @@ export default function InfoBadge({ content }: { content: string }) {
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <FiInfo className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
+          <FiInfo className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
         </span>
       </Tooltip>
     </>
diff --git a/apps/web/components/ui/LinkIconButton.tsx b/apps/web/components/ui/LinkIconButton.tsx
index 00ca1e926e..ee1bae86c9 100644
--- a/apps/web/components/ui/LinkIconButton.tsx
+++ b/apps/web/components/ui/LinkIconButton.tsx
@@ -12,8 +12,8 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
       <button
         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-gray-500 ltr:mr-2 rtl:ml-2" />
+        className="text-md hover:bg-emphasis hover:text-emphasis text-default flex items-center rounded-sm px-2 py-1 text-sm font-medium">
+        <props.Icon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>
diff --git a/apps/web/components/ui/ModalContainer.tsx b/apps/web/components/ui/ModalContainer.tsx
index a55e63cc11..84511a319b 100644
--- a/apps/web/components/ui/ModalContainer.tsx
+++ b/apps/web/components/ui/ModalContainer.tsx
@@ -19,7 +19,7 @@ export default function ModalContainer(
         <DialogContent>
           <div
             className={classNames(
-              "inline-block w-full transform bg-white text-left align-bottom transition-all sm:align-middle",
+              "inline-block w-full transform bg-default text-left align-bottom transition-all sm:align-middle",
               {
                 "sm:w-full sm:max-w-lg ": !props.wide,
                 "sm:w-4xl sm:max-w-4xl": props.wide,
diff --git a/apps/web/components/ui/PoweredByCal.tsx b/apps/web/components/ui/PoweredByCal.tsx
index 7bc8d526de..172934456c 100644
--- a/apps/web/components/ui/PoweredByCal.tsx
+++ b/apps/web/components/ui/PoweredByCal.tsx
@@ -12,7 +12,7 @@ const PoweredByCal = () => {
       <Link
         href={POWERED_BY_URL}
         target="_blank"
-        className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
+        className="text-bookinglight dark:text-inverted opacity-50 hover:opacity-100">
         {t("powered_by")}{" "}
         <img
           className="relative -mt-px inline h-[10px] w-auto dark:hidden"
diff --git a/apps/web/components/ui/SettingInputContainer.tsx b/apps/web/components/ui/SettingInputContainer.tsx
index 062a1bda76..0b0bd518cc 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-gray-700">
-            <Icon className="mt-0.5 h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />
+          <label htmlFor={htmlFor} className="text-default mt-1 flex text-sm font-medium">
+            <Icon className="text-subtle mt-0.5 h-4 w-4 ltr:mr-2 rtl:ml-2" />
             {label}
           </label>
         </div>
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 7fced1e911..0418f131b9 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -195,7 +195,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <span
           className={classNames(
             isInputUsernamePremium ? "border border-orange-400 " : "",
-            "hidden h-9 items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
+            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 border-r-gray-300 px-3 text-sm md:inline-flex"
           )}>
           {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
@@ -216,7 +216,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
                 : "border-l-gray-300",
-              disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
+              disabled ? "bg-subtle text-muted focus:border-0" : ""
             )}
             value={inputUsernameValue}
             onChange={(event) => {
@@ -261,15 +261,15 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 <p className="mb-4 text-sm text-gray-800">{t("change_username_standard_to_premium")}</p>
               )}
 
-              <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
+              <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">{t("current_username")}</p>
+                  <p className="text-subtle">{t("current_username")}</p>
                   <p className="mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
                 <div className="ml-6 flex-1">
-                  <p className="text-gray-500" data-testid="new-username">
+                  <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
                   <p>{inputUsernameValue}</p>
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index f672b94c70..c01811b5e3 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -162,15 +162,15 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             <div className="mb-4 w-full px-4 pt-1">
               <DialogHeader title={t("confirm_username_change_dialog_title")} />
 
-              <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
+              <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">{t("current_username")}</p>
+                  <p className="text-subtle">{t("current_username")}</p>
                   <p className="mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
                 <div className="flex-1">
-                  <p className="text-gray-500" data-testid="new-username">
+                  <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
                   <p>{inputUsernameValue}</p>
diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
index ba735bb89a..6b79678222 100644
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/components/ui/form/CheckboxField.tsx
@@ -22,7 +22,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
             {React.createElement(
               descriptionAsLabel ? "div" : "label",
               {
-                className: "flex text-sm font-medium text-gray-700",
+                className: "flex text-sm font-medium text-default",
                 ...(!descriptionAsLabel
                   ? {
                       htmlFor: rest.id,
@@ -40,7 +40,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
               {
                 className: classNames(
                   "relative flex items-start",
-                  descriptionAsLabel ? "text-gray-700" : "text-gray-900"
+                  descriptionAsLabel ? "text-default" : "text-emphasis"
                 ),
               },
               <>
@@ -49,7 +49,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     {...rest}
                     ref={ref}
                     type="checkbox"
-                    className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
+                    className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded"
                   />
                 </div>
                 <span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx
index a44c00bab3..40e89d78b2 100644
--- a/apps/web/components/ui/form/CheckedSelect.tsx
+++ b/apps/web/components/ui/form/CheckedSelect.tsx
@@ -51,7 +51,7 @@ export const CheckedSelect = ({
           {option.label}
           <FiX
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-gray-500"
+            className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
           />
         </div>
       ))}
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index 47e86a3e65..0adce37730 100644
--- a/apps/web/components/ui/form/DatePicker.tsx
+++ b/apps/web/components/ui/form/DatePicker.tsx
@@ -19,11 +19,11 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
   return (
     <PrimitiveDatePicker
       className={classNames(
-        "focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 text-sm",
+        "focus:ring-primary-500 focus:border-primary-500 border-default rounded-sm border p-1 pl-2 text-sm",
         className
       )}
       clearIcon={null}
-      calendarIcon={<FiCalendar className="h-5 w-5 text-gray-500" />}
+      calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/apps/web/components/ui/form/LocationSelect.tsx b/apps/web/components/ui/form/LocationSelect.tsx
index 22106ab20c..86dbc294ac 100644
--- a/apps/web/components/ui/form/LocationSelect.tsx
+++ b/apps/web/components/ui/form/LocationSelect.tsx
@@ -29,7 +29,7 @@ const OptionWithIcon = ({
   return (
     <div className="flex items-center gap-3">
       {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
-      <span className={classNames("text-sm font-medium", isSelected ? "text-white" : "text-gray-900")}>
+      <span className={classNames("text-sm font-medium", isSelected ? "text-inverted" : "text-emphasis")}>
         {label}
       </span>
     </div>
diff --git a/apps/web/components/ui/form/MinutesField.tsx b/apps/web/components/ui/form/MinutesField.tsx
index 8924431ad8..42d147ef6a 100644
--- a/apps/web/components/ui/form/MinutesField.tsx
+++ b/apps/web/components/ui/form/MinutesField.tsx
@@ -11,7 +11,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-gray-700">
+          <label htmlFor={rest.id} className="text-default flex h-full items-center text-sm font-medium">
             {label}
           </label>
         </div>
@@ -23,12 +23,12 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
             ref={ref}
             type="number"
             className={classNames(
-              "block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm",
+              "border-default block w-full rounded-sm pl-2 pr-12 text-sm",
               rest.className
             )}
           />
           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-            <span className="text-sm text-gray-500" id="duration">
+            <span className="text-subtle text-sm" id="duration">
               mins
             </span>
           </div>
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 7d7abeef0e..9757ccfba5 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -51,21 +51,21 @@ export default function Custom404() {
           noindex: true,
         }}
       />
-      <div className="min-h-screen bg-white px-4" data-testid="404-page">
+      <div className="bg-default min-h-screen px-4" data-testid="404-page">
         <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
           {isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (
             <div>
               <div>
-                <p className="text-sm font-semibold uppercase tracking-wide text-black">
+                <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
                   {t("missing_license")}
                 </p>
-                <h1 className="font-cal mt-2 text-3xl font-extrabold text-gray-900">
+                <h1 className="font-cal text-emphasis mt-2 text-3xl font-extrabold">
                   {t("signup_requires")}
                 </h1>
                 <p className="mt-4">{t("signup_requires_description", { companyName: COMPANY_NAME })}</p>
               </div>
               <div className="mt-12">
-                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
+                <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
                   {t("next_steps")}
                 </h2>
                 <ul role="list" className="mt-4">
@@ -79,7 +79,7 @@ export default function Custom404() {
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
+                        <h3 className="text-emphasis text-base font-medium">
                           <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                             <span className="focus:outline-none">
                               <span className="absolute inset-0" aria-hidden="true" />
@@ -87,10 +87,10 @@ export default function Custom404() {
                             </span>
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
+                        <p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -102,21 +102,21 @@ export default function Custom404() {
                       href={`${DEVELOPER_DOCS}/self-hosting/installation`}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                          <FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                          <FiFileText className="text-default h-6 w-6" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
+                        <h3 className="text-emphasis text-base font-medium">
                           <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             {t("prisma_studio_tip")}
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
+                        <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </Link>
                   </li>
@@ -125,7 +125,7 @@ export default function Custom404() {
                       href={JOIN_SLACK}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
                           <svg
                             viewBox="0 0 2447.6 2452.5"
                             className="h-6 w-6"
@@ -152,16 +152,16 @@ export default function Custom404() {
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
+                        <h3 className="text-emphasis text-base font-medium">
                           <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             Slack
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("join_our_community")}</p>
+                        <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -169,7 +169,7 @@ export default function Custom404() {
                 <div className="mt-8">
                   <Link
                     href={`${WEBSITE_URL}/enterprise`}
-                    className="text-base font-medium text-black hover:text-gray-500">
+                    className="hover:text-subtle text-emphasis text-base font-medium">
                     {t("contact_sales")}
                     <span aria-hidden="true"> &rarr;</span>
                   </Link>
@@ -178,147 +178,151 @@ export default function Custom404() {
             </div>
           ) : (
             <>
-              <div className="text-center">
-                <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
-                <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
-                  {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
-                </h1>
-                {isSubpage ? (
-                  <span className="mt-2 inline-block text-lg ">
-                    {t("check_spelling_mistakes_or_go_back")}
-                  </span>
-                ) : isCalcom ? (
-                  <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
-                    {t("the_username")}{" "}
-                    <strong className="text-blue-500">
-                      {new URL(WEBSITE_URL).hostname}
-                      {username}
-                    </strong>{" "}
-                    {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
-                  </a>
-                ) : (
-                  <span className="mt-2 inline-block text-lg">
-                    {t("the_username")}{" "}
-                    <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
-                    {t("is_still_available")}
-                  </span>
-                )}
-              </div>
-              <div className="mt-12">
-                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
-                  {t("popular_pages")}
-                </h2>
-                {!isSubpage && isCalcom && (
-                  <ul role="list" className="mt-4">
-                    <li className="border-2 border-green-500 px-4 py-2">
+              <>
+                <div className="text-center">
+                  <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
+                    {t("error_404")}
+                  </p>
+                  <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
+                    {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
+                  </h1>
+                  {isSubpage ? (
+                    <span className="mt-2 inline-block text-lg ">
+                      {t("check_spelling_mistakes_or_go_back")}
+                    </span>
+                  ) : isCalcom ? (
+                    <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
+                      {t("the_username")}{" "}
+                      <strong className="text-blue-500">
+                        {new URL(WEBSITE_URL).hostname}
+                        {username}
+                      </strong>{" "}
+                      {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
+                    </a>
+                  ) : (
+                    <span className="mt-2 inline-block text-lg">
+                      {t("the_username")}{" "}
+                      <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
+                      {t("is_still_available")}
+                    </span>
+                  )}
+                </div>
+                <div className="mt-12">
+                  <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
+                    {t("popular_pages")}
+                  </h2>
+                  {!isSubpage && isCalcom && (
+                    <ul role="list" className="mt-4">
+                      <li className="border-2 border-green-500 px-4 py-2">
+                        <a
+                          href={url}
+                          target="_blank"
+                          className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
+                          rel="noreferrer">
+                          <div className="flex-shrink-0">
+                            <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                              <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                            </span>
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <h3 className="text-emphasis text-base font-medium">
+                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                                <span className="focus:outline-none">
+                                  <span className="absolute inset-0" aria-hidden="true" />
+                                  {t("register")} <strong className="text-green-500">{username}</strong>
+                                </span>
+                              </span>
+                            </h3>
+                            <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
+                          </div>
+                          <div className="flex-shrink-0 self-center">
+                            <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          </div>
+                        </a>
+                      </li>
+                    </ul>
+                  )}
+
+                  <ul role="list" className="mt-4 divide-y divide-gray-200 border-gray-200">
+                    {links.map((link, linkIdx) => (
+                      <li key={linkIdx} className="px-4 py-2">
+                        <Link
+                          href={link.href}
+                          className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
+                          <div className="flex-shrink-0">
+                            <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                              <link.icon className="text-default h-6 w-6" aria-hidden="true" />
+                            </span>
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <h3 className="text-emphasis text-base font-medium">
+                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                                <span className="absolute inset-0" aria-hidden="true" />
+                                {link.title}
+                              </span>
+                            </h3>
+                            <p className="text-subtle text-base">{link.description}</p>
+                          </div>
+                          <div className="flex-shrink-0 self-center">
+                            <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          </div>
+                        </Link>
+                      </li>
+                    ))}
+                    <li className="px-4 py-2">
                       <a
-                        href={url}
-                        target="_blank"
-                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
-                        rel="noreferrer">
+                        href={JOIN_SLACK}
+                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                         <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                            <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                            <svg
+                              viewBox="0 0 2447.6 2452.5"
+                              className="h-6 w-6"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <g clipRule="evenodd" fillRule="evenodd">
+                                <path
+                                  d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                                <path
+                                  d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                                <path
+                                  d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                                <path
+                                  d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                              </g>
+                            </svg>
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
+                          <h3 className="text-emphasis text-base font-medium">
                             <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                              <span className="focus:outline-none">
-                                <span className="absolute inset-0" aria-hidden="true" />
-                                {t("register")} <strong className="text-green-500">{username}</strong>
-                              </span>
+                              <span className="absolute inset-0" aria-hidden="true" />
+                              Slack
                             </span>
                           </h3>
-                          <p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
+                          <p className="text-subtle text-base">{t("join_our_community")}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </a>
                     </li>
                   </ul>
-                )}
-
-                <ul role="list" className="mt-4 divide-y divide-gray-200 border-gray-200">
-                  {links.map((link, linkIdx) => (
-                    <li key={linkIdx} className="px-4 py-2">
-                      <Link
-                        href={link.href}
-                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                        <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                            <link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
-                          </span>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                              <span className="absolute inset-0" aria-hidden="true" />
-                              {link.title}
-                            </span>
-                          </h3>
-                          <p className="text-base text-gray-500">{link.description}</p>
-                        </div>
-                        <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                        </div>
-                      </Link>
-                    </li>
-                  ))}
-                  <li className="px-4 py-2">
-                    <a
-                      href={JOIN_SLACK}
-                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                      <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                          <svg
-                            viewBox="0 0 2447.6 2452.5"
-                            className="h-6 w-6"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <g clipRule="evenodd" fillRule="evenodd">
-                              <path
-                                d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                                fill="rgba(55, 65, 81)"
-                              />
-                            </g>
-                          </svg>
-                        </span>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                            <span className="absolute inset-0" aria-hidden="true" />
-                            Slack
-                          </span>
-                        </h3>
-                        <p className="text-base text-gray-500">{t("join_our_community")}</p>
-                      </div>
-                      <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-                <div className="mt-8">
-                  <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
-                    {t("or_go_back_home")}
-                    <span aria-hidden="true"> &rarr;</span>
-                  </Link>
+                  <div className="mt-8">
+                    <Link href="/" className="hover:text-subtle text-emphasis text-base font-medium">
+                      {t("or_go_back_home")}
+                      <span aria-hidden="true"> &rarr;</span>
+                    </Link>
+                  </div>
                 </div>
-              </div>
+              </>
             </>
           )}
         </main>
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index 208810b8ab..a8af0b0c1c 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -11,14 +11,14 @@ export default function Error500() {
   const router = useRouter();
 
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="bg-subtle flex h-screen">
       <Head>
         <title>Something unexpected occurred | {APP_NAME}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="rtl: m-auto rounded-md bg-white p-10 text-right ltr:text-left">
-        <h1 className="font-cal text-6xl text-black">500</h1>
-        <h2 className="mt-6 text-2xl font-medium text-black">It&apos;s not you, it&apos;s us.</h2>
+      <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
+        <h1 className="font-cal text-emphasis text-6xl">500</h1>
+        <h2 className="text-emphasis mt-6 text-2xl font-medium">It&apos;s not you, it&apos;s us.</h2>
         <p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
@@ -28,7 +28,7 @@ export default function Error500() {
             <p className="mb-4 max-w-2xl text-sm text-gray-600">
               Please provide the following text when contacting support to better help you:
             </p>
-            <pre className="w-full max-w-2xl whitespace-normal break-words rounded-md bg-gray-200 p-4 text-gray-900">
+            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
               {router.query.error}
               <br />
               <Button
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 8e032088f8..a7744f58db 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -49,8 +49,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
   const groupEventTypes = props.users.some((user) => !user.allowDynamicBooking) ? (
     <div className="space-y-6" data-testid="event-types">
       <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-        <div className="p-8 text-center text-gray-400 dark:text-white">
-          <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">{" " + t("unavailable")}</h2>
+        <div className="p-8 text-center text-muted dark:text-inverted">
+          <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-inverted">{" " + t("unavailable")}</h2>
           <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
         </div>
       </div>
@@ -60,14 +60,14 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
-          <FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+          className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted">
+          <FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
             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-gray-900">{type.title}</p>
+              <p className="dark:text-darkgray-700 text-sm font-semibold text-emphasis">{type.title}</p>
               <EventTypeDescription className="text-sm" eventType={type} />
             </div>
             <div className="mt-1 self-center">
@@ -130,23 +130,23 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
             isEmbed
-              ? " border-bookinglightest  dark:bg-darkgray-50 rounded-md border bg-white sm:dark:border-gray-600"
+              ? " border-bookinglightest  dark:bg-darkgray-50 rounded-md border bg-default sm:dark:border-gray-600"
               : "",
             "max-w-3xl py-24 px-4"
           )}>
           {isSingleUser && ( // When we deal with a single user, not dynamic group
             <div className="mb-8 text-center">
               <Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
-              <h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
+              <h1 className="font-cal mb-1 text-3xl text-emphasis dark:text-inverted">
                 {nameOrUsername}
                 {user.verified && (
-                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
+                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-inverted" />
                 )}
               </h1>
               {!isBioEmpty && (
                 <>
                   <div
-                    className=" dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    className=" dark:text-darkgray-600 text-sm text-subtle [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
                   />
                 </>
@@ -161,8 +161,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
             data-testid="event-types">
             {user.away ? (
               <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-                <div className="p-8 text-center text-gray-400 dark:text-white">
-                  <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+                <div className="p-8 text-center text-muted dark:text-inverted">
+                  <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-inverted">
                     😴{" " + t("user_away")}
                   </h2>
                   <p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
@@ -175,8 +175,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
-                  <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+                  className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted
+                  <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <div className="block w-full p-5">
                     <Link
@@ -193,7 +193,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                       }}
                       data-testid="event-type-link">
                       <div className="flex flex-wrap items-center">
-                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
+                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-default">
                           {type.title}
                         </h2>
                       </div>
diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index b0879a49ce..13f891071e 100644
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@@ -20,12 +20,12 @@ export default function Type(props: AvailabilityPageProps) {
   const { t } = useLocale();
 
   return props.away ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
                 😴{" " + t("user_away")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_away_description")}</p>
@@ -39,8 +39,8 @@ export default function Type(props: AvailabilityPageProps) {
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
                 {" " + t("unavailable")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
diff --git a/apps/web/pages/[user]/book.tsx b/apps/web/pages/[user]/book.tsx
index 6886395074..3d203020c0 100644
--- a/apps/web/pages/[user]/book.tsx
+++ b/apps/web/pages/[user]/book.tsx
@@ -34,12 +34,12 @@ export type BookPageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Book(props: BookPageProps) {
   const { t } = useLocale();
   return props.away ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
                 😴{" " + t("user_away")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_away_description")}</p>
@@ -49,12 +49,12 @@ export default function Book(props: BookPageProps) {
       </main>
     </div>
   ) : props.isDynamicGroupBooking && !props.profile.allowDynamicBooking ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted mb-2 text-3xl text-gray-600">
                 {" " + t("unavailable")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 2d92e21ddb..c69aef55a2 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -46,7 +46,7 @@ class MyDocument extends Document<Props> {
         </Head>
 
         <body
-          className="dark:bg-darkgray-50 desktop-transparent bg-gray-100 antialiased"
+          className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
           style={
             isEmbed
               ? {
diff --git a/apps/web/pages/apps/[slug]/setup.tsx b/apps/web/pages/apps/[slug]/setup.tsx
index f2d840d1a3..1bc8f29e01 100644
--- a/apps/web/pages/apps/[slug]/setup.tsx
+++ b/apps/web/pages/apps/[slug]/setup.tsx
@@ -11,7 +11,7 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
   const { status } = useSession();
 
   if (status === "loading") {
-    return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
+    return <div className="absolute z-50 flex h-screen w-full items-center bg-emphasis" />;
   }
 
   if (status === "unauthenticated") {
diff --git a/apps/web/pages/apps/categories/[category].tsx b/apps/web/pages/apps/categories/[category].tsx
index 3829db7470..442105d902 100644
--- a/apps/web/pages/apps/categories/[category].tsx
+++ b/apps/web/pages/apps/categories/[category].tsx
@@ -24,7 +24,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
           <>
             <Link
               href="/apps"
-              className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
+              className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
               {isLocaleReady ? t("app_store") : <SkeletonText className="h-4 w-24" />}{" "}
             </Link>
             {category && (
diff --git a/apps/web/pages/apps/categories/index.tsx b/apps/web/pages/apps/categories/index.tsx
index 0fc363b4e6..0c3297cb7c 100644
--- a/apps/web/pages/apps/categories/index.tsx
+++ b/apps/web/pages/apps/categories/index.tsx
@@ -15,7 +15,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
       <div className="text-md flex items-center gap-1 px-4 pb-3 pt-3 font-normal md:px-8 lg:px-0 lg:pt-0">
         <Link
           href="/apps"
-          className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
+          className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
           <FiArrowLeft className="h-4 w-4" />
           {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
         </Link>
@@ -27,10 +27,10 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
               key={category.name}
               href={"/apps/categories/" + category.name}
               data-testid={`app-store-category-${category.name}`}
-              className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
+              className="bg-subtle relative flex rounded-sm px-6 py-4 sm:block">
               <div className="self-center">
                 <h3 className="font-medium capitalize">{category.name}</h3>
-                <p className="text-sm text-gray-500">
+                <p className="text-subtle text-sm">
                   {t("number_apps", { count: category.count })}{" "}
                   <FiArrowRight className="inline-block h-4 w-4" />
                 </p>
diff --git a/apps/web/pages/apps/index.tsx b/apps/web/pages/apps/index.tsx
index 9ad2aba989..5dbd92cbdf 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -36,9 +36,9 @@ function AppsSearch({
 }) {
   return (
     <TextField
-      className="!border-gray-100 bg-gray-100 !pl-0 focus:!ring-offset-0"
-      addOnLeading={<FiSearch className="h-4 w-4 text-gray-500" />}
-      addOnClassname="!border-gray-100"
+      className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
+      addOnLeading={<FiSearch className="text-subtle h-4 w-4" />}
+      addOnClassname="!border-muted"
       containerClassName={classNames("focus:!ring-offset-0", className)}
       type="search"
       autoComplete="false"
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index e76d12cea2..1af0845256 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -28,15 +28,15 @@ export default function Error() {
   return (
     <AuthContainer title="" description="">
       <div>
-        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+        <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
           <FiX className="h-6 w-6 text-red-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
-          <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
             {error}
           </h3>
           <div className="mt-2">
-            <p className="text-sm text-gray-500">{errorMsg}</p>
+            <p className="text-subtle text-sm">{errorMsg}</p>
           </div>
         </div>
       </div>
diff --git a/apps/web/pages/auth/forgot-password/[id].tsx b/apps/web/pages/auth/forgot-password/[id].tsx
index 2fa048df1c..5687121ce4 100644
--- a/apps/web/pages/auth/forgot-password/[id].tsx
+++ b/apps/web/pages/auth/forgot-password/[id].tsx
@@ -60,7 +60,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
+            <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">
               {t("password_updated")}
             </h2>
           </div>
@@ -77,8 +77,8 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
       <>
         <div className="space-y-6">
           <div>
-            <h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">{t("whoops")}</h2>
-            <h2 className="text-center text-3xl font-extrabold text-gray-900">{t("request_is_expired")}</h2>
+            <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">{t("whoops")}</h2>
+            <h2 className="text-emphasis text-center text-3xl font-extrabold">{t("request_is_expired")}</h2>
           </div>
           <p>{t("request_is_expired_instructions")}</p>
           <Link href="/auth/forgot-password" passHref legacyBehavior>
diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx
index 1ea2df7c21..94184e7013 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -96,7 +96,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
       footerText={
         !success && (
           <>
-            <Link href="/auth/login" className="font-medium text-gray-900">
+            <Link href="/auth/login" className="text-emphasis font-medium">
               {t("back_to_signin")}
             </Link>
           </>
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index 686546fd13..cce38130b1 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -31,15 +31,15 @@ export default function Logout(props: Props) {
   return (
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
       <div className="mb-4">
-        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+        <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
           <FiCheck className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
-          <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
             {t("youve_been_logged_out")}
           </h3>
           <div className="mt-2">
-            <p className="text-sm text-gray-500">{t("hope_to_see_you_soon")}</p>
+            <p className="text-subtle text-sm">{t("hope_to_see_you_soon")}</p>
           </div>
         </div>
       </div>
diff --git a/apps/web/pages/auth/setup/index.tsx b/apps/web/pages/auth/setup/index.tsx
index fd8a75ea5f..de6836a82a 100644
--- a/apps/web/pages/auth/setup/index.tsx
+++ b/apps/web/pages/auth/setup/index.tsx
@@ -103,7 +103,7 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
           id={`wizard-step-${currentStep}`}
           name={`wizard-step-${currentStep}`}
           classNames={{
-            form: "mb-4 rounded-md bg-white px-0 pt-0 md:max-w-full",
+            form: "mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full",
             appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
             verticalTabsItem: "!w-48 md:p-4",
           }}
@@ -121,7 +121,7 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
   return (
     <>
       <Meta title={t("setup")} description={t("setup_description")} />
-      <main className="flex items-center bg-gray-100 print:h-full md:h-screen">
+      <main className="flex items-center bg-subtle print:h-full md:h-screen">
         <WizardForm
           href="/auth/setup"
           steps={steps}
diff --git a/apps/web/pages/auth/verify.tsx b/apps/web/pages/auth/verify.tsx
index 0488aa360d..a9c041b551 100644
--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@@ -101,7 +101,7 @@ export default function Verify() {
   }
 
   return (
-    <div className="bg-black bg-opacity-90 text-white backdrop-blur-md backdrop-grayscale backdrop-filter">
+    <div className="text-inverted bg-black bg-opacity-90 backdrop-blur-md backdrop-grayscale backdrop-filter">
       <Head>
         <title>
           {/* @note: Ternary can look ugly ant his might be extracted later but I think at 3 it's not yet worth
@@ -117,11 +117,11 @@ export default function Verify() {
         <div className="m-10 flex max-w-2xl flex-col items-start border border-white p-12 text-left">
           <div className="rounded-full border border-white p-3">
             {hasPaymentFailed ? (
-              <ExclamationIcon className="h-12 w-12 flex-shrink-0 p-0.5 font-extralight text-white" />
+              <ExclamationIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
             ) : sessionId ? (
-              <CheckIcon className="h-12 w-12 flex-shrink-0 p-0.5 font-extralight text-white" />
+              <CheckIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
             ) : (
-              <MailOpenIcon className="h-12 w-12 flex-shrink-0 p-0.5 font-extralight text-white" />
+              <MailOpenIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
             )}
           </div>
           <h3 className="font-cal my-6 text-3xl font-normal">
@@ -139,7 +139,7 @@ export default function Verify() {
             {hasPaymentFailed &&
               "Once you activate your account you will be able to try purchase your premium username again or select a different one."}
           </p>
-          <p className="mt-6 text-gray-400">
+          <p className="text-muted mt-6">
             Don&apos;t see an email? Click the button below to send another email.
           </p>
 
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 3387bd48b8..c94fdc22b5 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -53,7 +53,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
   const { t } = useLocale();
   return (
     <div className="p-6">
-      <h3 className="font-medium leading-6 text-gray-900">
+      <h3 className="text-emphasis font-medium leading-6">
         {t("date_overrides")}{" "}
         <Tooltip content={t("date_overrides_info")}>
           <span className="inline-block">
@@ -61,7 +61,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
           </span>
         </Tooltip>
       </h3>
-      <p className="mb-4 text-sm text-gray-500">{t("date_overrides_subtitle")}</p>
+      <p className="text-subtle mb-4 text-sm">{t("date_overrides_subtitle")}</p>
       <div className="space-y-2">
         <DateOverrideList
           excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
@@ -180,7 +180,7 @@ export default function Availability() {
       }
       CTA={
         <div className="flex items-center justify-end">
-          <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
+          <div className="sm:hover:bg-subtle flex items-center rounded-md px-2">
             <Skeleton
               as={Label}
               htmlFor="hiddenSwitch"
@@ -217,7 +217,7 @@ export default function Availability() {
 
           <VerticalDivider />
 
-          <div className="border-l-2 border-gray-300" />
+          <div className="border-default border-l-2" />
           <Button className="ml-4 lg:ml-0" type="submit" form="availability-form">
             {t("save")}
           </Button>
@@ -259,7 +259,7 @@ export default function Availability() {
           <div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
             <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
               <div>
-                <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="timeZone" className="text-default block text-sm font-medium">
                   {t("timezone")}
                 </label>
                 <Controller
@@ -268,7 +268,7 @@ export default function Availability() {
                     value ? (
                       <TimezoneSelect
                         value={value}
-                        className="focus:border-brand mt-1 block w-72 rounded-md border-gray-300 text-sm"
+                        className="focus:border-brand-default border-default mt-1 block w-72 rounded-md text-sm"
                         onChange={(timezone) => onChange(timezone.value)}
                       />
                     ) : (
@@ -279,7 +279,7 @@ export default function Availability() {
               </div>
               <hr className="my-6 mr-8" />
               <div className="hidden rounded-md md:block">
-                <h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
+                <h3 className="text-emphasis text-sm font-medium">{t("something_doesnt_look_right")}</h3>
                 <div className="mt-3 flex">
                   <Button href="/availability/troubleshoot" color="secondary">
                     {t("launch_troubleshooter")}
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index 848ac2dbc8..538a819834 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -82,7 +82,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
           />
         </div>
       ) : (
-        <div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
+        <div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-default">
           <ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}>
             {schedules.map((schedule) => (
               <ScheduleListItem
diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index 5290c7edac..be5f3ba125 100644
--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/apps/web/pages/availability/troubleshoot.tsx
@@ -46,7 +46,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
     }, [] as IBusySlot[]) || [];
 
   return (
-    <div className="max-w-xl overflow-hidden rounded-md bg-white shadow">
+    <div className="bg-default max-w-xl overflow-hidden rounded-md shadow">
       <div className="px-4 py-5 sm:p-6">
         {t("overview_of_day")}{" "}
         <input
@@ -57,7 +57,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
             if (e.target.value) setSelectedDate(e.target.value);
           }}
         />
-        <small className="block text-gray-400">{t("hover_over_bold_times_tip")}</small>
+        <small className="text-muted block">{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">
@@ -79,9 +79,9 @@ const AvailabilityView = ({ user }: { user: User }) => {
                 .map((slot: IBusySlot) => (
                   <div
                     key={dayjs(slot.start).format("HH:mm")}
-                    className="overflow-hidden rounded-md bg-gray-100"
+                    className="bg-subtle overflow-hidden rounded-md"
                     data-testid="troubleshooter-busy-time">
-                    <div className="px-4 py-5 text-black sm:p-6">
+                    <div className="text-emphasis px-4 py-5 sm:p-6">
                       {t("calendar_shows_busy_between")}{" "}
                       <span className="font-medium text-gray-800" title={dayjs(slot.start).format("HH:mm")}>
                         {dayjs(slot.start).format("HH:mm")}
@@ -98,8 +98,8 @@ const AvailabilityView = ({ user }: { user: User }) => {
                   </div>
                 ));
             return (
-              <div className="overflow-hidden rounded-md bg-gray-100">
-                <div className="px-4 py-5 text-black sm:p-6">{t("calendar_no_busy_slots")}</div>
+              <div className="bg-subtle overflow-hidden rounded-md">
+                <div className="text-emphasis px-4 py-5 sm:p-6">{t("calendar_no_busy_slots")}</div>
               </div>
             );
           })()}
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index bdb0de015d..c029038897 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -130,7 +130,7 @@ function RedirectionToast({ url }: { url: string }) {
           <div className="border border-green-600 bg-green-500 p-2 sm:p-3">
             <div className="flex flex-wrap items-center justify-between">
               <div className="flex w-0 flex-1 items-center">
-                <p className="truncate font-medium text-white sm:mx-3">
+                <p className="text-inverted truncate font-medium sm:mx-3">
                   <span className="md:hidden">Redirecting to {url} ...</span>
                   <span className="hidden md:inline">
                     {t("you_are_being_redirected", { url, seconds: timeRemaining })}
@@ -144,7 +144,7 @@ function RedirectionToast({ url }: { url: string }) {
                       redirectToExternalUrl(urlWithSuccessParamsRef.current);
                     }
                   }}
-                  className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
+                  className="bg-default flex w-full items-center justify-center rounded-sm border border-transparent px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
                   {t("continue")}
                 </button>
               </div>
@@ -155,7 +155,7 @@ function RedirectionToast({ url }: { url: string }) {
                     setIsToastVisible(false);
                   }}
                   className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
-                  <FiX className="h-6 w-6 text-white" />
+                  <FiX className="text-inverted h-6 w-6" />
                 </button>
               </div>
             </div>
@@ -376,7 +376,7 @@ export default function Success(props: SuccessProps) {
         <div className="mt-2 ml-4 -mb-4">
           <Link
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
-            className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-transparent dark:hover:text-white">
+            className="hover:bg-subtle text-subtle dark:hover:text-inverted mt-2 inline-flex px-1 py-2 text-sm hover:text-gray-800 dark:hover:bg-transparent">
             <FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
           </Link>
         </div>
@@ -400,7 +400,7 @@ export default function Success(props: SuccessProps) {
               <div
                 className={classNames(
                   "main inline-block transform overflow-hidden rounded-lg border sm:my-8 sm:max-w-xl",
-                  isBackgroundTransparent ? "" : "dark:bg-darkgray-100 dark:border-darkgray-200 bg-white",
+                  isBackgroundTransparent ? "" : "dark:bg-darkgray-100 dark:border-darkgray-200 bg-default",
                   "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
                 )}
                 role="dialog"
@@ -410,12 +410,12 @@ export default function Success(props: SuccessProps) {
                   className={classNames(
                     "mx-auto flex items-center justify-center",
                     !giphyImage && !isCancelled && !needsConfirmation
-                      ? "h-12 w-12 rounded-full bg-green-100"
+                      ? "bg-success h-12 w-12 rounded-full"
                       : "",
                     !giphyImage && !isCancelled && needsConfirmation
-                      ? "h-12 w-12 rounded-full bg-gray-100"
+                      ? "bg-subtle h-12 w-12 rounded-full"
                       : "",
-                    isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
+                    isCancelled ? "bg-error h-12 w-12 rounded-full" : ""
                   )}>
                   {giphyImage && !needsConfirmation && (
                     // eslint-disable-next-line @next/next/no-img-element
@@ -424,12 +424,12 @@ export default function Success(props: SuccessProps) {
                   {!giphyImage && !needsConfirmation && !isCancelled && (
                     <FiCheck className="h-5 w-5 text-green-600" />
                   )}
-                  {needsConfirmation && !isCancelled && <FiCalendar className="h-5 w-5 text-gray-900" />}
+                  {needsConfirmation && !isCancelled && <FiCalendar className="text-emphasis h-5 w-5" />}
                   {isCancelled && <FiX className="h-5 w-5 text-red-600" />}
                 </div>
                 <div className="mt-6 mb-8 text-center last:mb-0">
                   <h3
-                    className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white"
+                    className="text-emphasis dark:text-inverted text-2xl font-semibold leading-6"
                     data-testid={isCancelled ? "cancelled-headline" : ""}
                     id="modal-headline">
                     {needsConfirmation && !isCancelled
@@ -532,10 +532,10 @@ export default function Success(props: SuccessProps) {
                               href={locationToDisplay}
                               target="_blank"
                               title={locationToDisplay}
-                              className="flex items-center gap-2 text-gray-700 underline dark:text-gray-50"
+                              className="text-default flex items-center gap-2 underline dark:text-gray-50"
                               rel="noreferrer">
                               {providerName || "Link"}
-                              <FiExternalLink className="inline h-4 w-4 text-gray-700 dark:text-white" />
+                              <FiExternalLink className="text-default dark:text-inverted inline h-4 w-4" />
                             </a>
                           ) : (
                             locationToDisplay
@@ -586,12 +586,12 @@ export default function Success(props: SuccessProps) {
                     <>
                       <hr className="border-bookinglightest dark:border-darkgray-300 mb-8" />
                       <div className="text-center last:pb-0">
-                        <span className="text-gray-900 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                        <span className="text-emphasis ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                           {t("need_to_make_a_change")}
                         </span>
 
                         {!props.recurringBookings && (
-                          <span className="text-bookinglight inline text-gray-700">
+                          <span className="text-bookinglight text-default inline">
                             <span className="underline">
                               <Link href={`/reschedule/${bookingInfo?.uid}`} legacyBehavior>
                                 {t("reschedule")}
@@ -604,7 +604,7 @@ export default function Success(props: SuccessProps) {
                         <button
                           data-testid="cancel"
                           className={classNames(
-                            "text-bookinglight text-gray-700 underline",
+                            "text-bookinglight text-default underline",
                             props.recurringBookings && "ltr:mr-2 rtl:ml-2"
                           )}
                           onClick={() => setIsCancellationMode(true)}>
@@ -634,7 +634,7 @@ export default function Success(props: SuccessProps) {
                     <>
                       <hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
                       <div className="text-bookingdark align-center flex flex-row justify-center pt-8">
-                        <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                        <span className="text-default flex self-center font-medium ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                           {t("add_to_calendar")}
                         </span>
                         <div className="justify-left mt-1 flex text-left sm:mt-0">
@@ -656,7 +656,7 @@ export default function Success(props: SuccessProps) {
                                   encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
                                 : "")
                             }
-                            className="h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:text-white">
+                            className="dark:text-inverted h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-gray-700">
                             <svg
                               className="-mt-1.5 inline-block h-4 w-4"
                               fill="currentColor"
@@ -682,7 +682,7 @@ export default function Success(props: SuccessProps) {
                                 ? "&location=" + encodeURIComponent(locationVideoCallUrl)
                                 : "")
                             }
-                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
+                            className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -709,7 +709,7 @@ export default function Success(props: SuccessProps) {
                                 ? "&location=" + encodeURIComponent(locationVideoCallUrl)
                                 : "")
                             }
-                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
+                            className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -722,7 +722,7 @@ export default function Success(props: SuccessProps) {
                           </Link>
                           <Link
                             href={"data:text/calendar," + eventLink()}
-                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
+                            className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700"
                             download={props.eventType.title + ".ics"}>
                             <svg
                               version="1.1"
@@ -741,7 +741,7 @@ export default function Success(props: SuccessProps) {
                 {session === null && !(userIsOwner || props.hideBranding) && (
                   <>
                     <hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
-                    <div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 pt-8 text-center text-xs dark:text-white">
+                    <div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 dark:text-inverted pt-8 text-center text-xs">
                       <a href="https://cal.com/signup">
                         {t("create_booking_link_with_calcom", { appName: APP_NAME })}
                       </a>
@@ -759,7 +759,7 @@ export default function Success(props: SuccessProps) {
                           name="email"
                           id="email"
                           defaultValue={email}
-                          className="mr- focus:border-brand border-bookinglightest dark:border-darkgray-300 mt-0 block w-full rounded-none rounded-l-md border-gray-300 shadow-sm focus:ring-black dark:bg-black dark:text-white sm:text-sm"
+                          className="mr- focus:border-brand-default border-bookinglightest dark:border-darkgray-300 border-default dark:text-inverted mt-0 block w-full rounded-none rounded-l-md shadow-sm focus:ring-black dark:bg-black sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
                         <Button
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index d3b036b147..3261e75c33 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -122,10 +122,10 @@ export default function Bookings() {
             {!!bookingsToday.length && status === "upcoming" && (
               <div className="mb-6 pt-2 xl:pt-0">
                 <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
-                <p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("today")}</p>
+                <p className="text-subtle mb-2 text-xs font-medium uppercase leading-4">{t("today")}</p>
                 <div className="overflow-hidden rounded-md border border-gray-200">
                   <table className="w-full max-w-full table-fixed">
-                    <tbody className="divide-y divide-gray-200 bg-white" data-testid="today-bookings">
+                    <tbody className="bg-default divide-y divide-gray-200" data-testid="today-bookings">
                       <Fragment>
                         {bookingsToday.map((booking: BookingOutput) => (
                           <BookingListItem
@@ -144,7 +144,7 @@ export default function Bookings() {
             <div className="pt-2 xl:pt-0">
               <div className="overflow-hidden rounded-md border border-gray-200">
                 <table className="w-full max-w-full table-fixed">
-                  <tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">
+                  <tbody className="bg-default divide-y divide-gray-200" data-testid="bookings">
                     {query.data.pages.map((page, index) => (
                       <Fragment key={index}>
                         {page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 8e5a1977de..92e97001ae 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -122,13 +122,13 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
       title={type.title}>
       <div>
         <span
-          className="font-semibold text-gray-700 ltr:mr-1 rtl:ml-1"
+          className="text-default font-semibold ltr:mr-1 rtl:ml-1"
           data-testid={"event-type-title-" + type.id}>
           {type.title}
         </span>
         {group.profile.slug ? (
           <small
-            className="hidden font-normal leading-4 text-gray-600 sm:inline"
+            className="text-muted hidden font-normal leading-4 sm:inline"
             data-testid={"event-type-slug-" + type.id}>
             {`/${group.profile.slug}/${type.slug}`}
           </small>
@@ -311,18 +311,18 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
   const firstItem = types[0];
   const lastItem = types[types.length - 1];
   return (
-    <div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white">
+    <div className="bg-default mb-16 flex overflow-hidden rounded-md border border-gray-200">
       <ul ref={parent} className="!static w-full divide-y divide-gray-200" data-testid="event-types">
         {types.map((type, index) => {
           const embedLink = `${group.profile.slug}/${type.slug}`;
           const calLink = `${CAL_URL}/${embedLink}`;
           return (
             <li key={type.id}>
-              <div className="flex w-full items-center justify-between hover:bg-gray-50">
+              <div className="hover:bg-muted flex w-full items-center justify-between">
                 <div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
                   {!(firstItem && firstItem.id === type.id) && (
                     <button
-                      className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
+                      className="bg-default text-muted disabled:hover:text-muted hover:text-emphasis invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
                       onClick={() => moveEventType(index, -1)}>
                       <FiArrowUp className="h-5 w-5" />
                     </button>
@@ -330,7 +330,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
 
                   {!(lastItem && lastItem.id === type.id) && (
                     <button
-                      className="invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md  border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
+                      className="bg-default text-muted disabled:hover:text-muted hover:text-emphasis invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
                       onClick={() => moveEventType(index, 1)}>
                       <FiArrowDown className="h-5 w-5" />
                     </button>
@@ -357,7 +357,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           </Badge>
                         )}
                         <Tooltip content={t("show_eventtype_on_profile")}>
-                          <div className="self-center rounded-md p-2 hover:bg-gray-200">
+                          <div className="hover:bg-emphasis self-center rounded-md p-2">
                             <Switch
                               name="Hidden"
                               checked={!type.hidden}
@@ -585,11 +585,11 @@ const EventTypeListHeading = ({
       <div>
         <Link
           href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
-          className="font-bold">
+          className="text-emphasis font-bold">
           {profile?.name || ""}
         </Link>
         {membershipCount && teamId && (
-          <span className="relative -top-px text-xs text-gray-500 ltr:ml-2 ltr:mr-2 rtl:ml-2">
+          <span className="text-subtle relative -top-px text-xs ltr:ml-2 ltr:mr-2 rtl:ml-2">
             <Link href={`/settings/teams/${teamId}/members`}>
               <Badge variant="gray">
                 <FiUsers className="mr-1 -mt-px inline h-3 w-3" />
@@ -599,7 +599,7 @@ const EventTypeListHeading = ({
           </span>
         )}
         {profile?.slug && (
-          <Link href={`${CAL_URL}/${profile.slug}`} className="block text-xs text-gray-500">
+          <Link href={`${CAL_URL}/${profile.slug}`} className="text-subtle block text-xs">
             {`${CAL_URL?.replace("https://", "")}/${profile.slug}`}
           </Link>
         )}
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index c360b4c40e..52e5729004 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -80,7 +80,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
 
   return (
     <div
-      className="dark:bg-brand dark:text-brand-contrast min-h-screen text-black"
+      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen"
       data-testid="onboarding"
       key={router.asPath}>
       <Head>
@@ -100,7 +100,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
                 </p>
 
                 {headers[currentStepIndex]?.subtitle.map((subtitle, index) => (
-                  <p className="font-sans text-sm font-normal text-gray-500" key={index}>
+                  <p className="text-subtle font-sans text-sm font-normal" key={index}>
                     {subtitle}
                   </p>
                 ))}
diff --git a/apps/web/pages/maintenance.tsx b/apps/web/pages/maintenance.tsx
index e2b7ecc35d..bcf3ce77fe 100644
--- a/apps/web/pages/maintenance.tsx
+++ b/apps/web/pages/maintenance.tsx
@@ -8,15 +8,15 @@ export default function MaintenancePage() {
   const { t, isLocaleReady } = useLocale();
   if (!isLocaleReady) return null;
   return (
-    <div className="flex h-screen bg-gray-100">
+    <div className="bg-subtle flex h-screen">
       <Head>
         <title>
           {t("under_maintenance")} | {APP_NAME}
         </title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="m-auto rounded-md bg-white p-10 text-right ltr:text-left">
-        <h1 className="text-2xl font-medium text-black">{t("under_maintenance")}</h1>
+      <div className="bg-default m-auto rounded-md p-10 text-right ltr:text-left">
+        <h1 className="text-emphasis text-2xl font-medium">{t("under_maintenance")}</h1>
         <p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
           {t("under_maintenance_description", { appName: APP_NAME })}
         </p>
diff --git a/apps/web/pages/more.tsx b/apps/web/pages/more.tsx
index ba6d308669..ff45b39f1e 100644
--- a/apps/web/pages/more.tsx
+++ b/apps/web/pages/more.tsx
@@ -7,7 +7,7 @@ export default function MorePage() {
     <Shell>
       <div className="max-w-screen-lg">
         <MobileNavigationMoreItems />
-        <p className="mt-6 text-xs leading-tight text-gray-500 md:hidden">{t("more_page_footer")}</p>
+        <p className="text-subtle mt-6 text-xs leading-tight md:hidden">{t("more_page_footer")}</p>
       </div>
     </Shell>
   );
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index d32e246186..f121904c45 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -136,7 +136,7 @@ const AppearanceView = () => {
           defaultValue={user.brandColor}
           render={() => (
             <div>
-              <p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
+              <p className="text-emphasis mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.brandColor}
                 onChange={(value) => formMethods.setValue("brandColor", value, { shouldDirty: true })}
@@ -150,7 +150,7 @@ const AppearanceView = () => {
           defaultValue={user.darkBrandColor}
           render={() => (
             <div className="mt-6 sm:mt-0">
-              <p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
+              <p className="text-emphasis mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.darkBrandColor}
                 onChange={(value) => formMethods.setValue("darkBrandColor", value, { shouldDirty: true })}
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index 357eeaa2f2..4ddde482c0 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -84,14 +84,14 @@ const CalendarsView = () => {
         success={({ data }) => {
           return data.connectedCalendars.length ? (
             <div>
-              <div className="mt-4 flex space-x-4 rounded-md border-gray-200 bg-gray-50 p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
-                <div className=" flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 bg-white p-[6px]">
+              <div className="bg-muted mt-4 flex space-x-4 rounded-md border-gray-200 p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
+                <div className=" bg-default flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 p-[6px]">
                   <FiCalendar className="h-6 w-6" />
                 </div>
 
                 <div className="flex w-full flex-col space-y-3">
                   <div>
-                    <h4 className=" pb-2 text-base font-semibold leading-5 text-black">
+                    <h4 className=" text-emphasis pb-2 text-base font-semibold leading-5">
                       {t("add_to_calendar")}
                     </h4>
                     <p className=" text-sm leading-5 text-gray-600">
@@ -109,7 +109,7 @@ const CalendarsView = () => {
                   />
                 </div>
               </div>
-              <h4 className="mt-12 text-base font-semibold leading-5 text-black">
+              <h4 className="text-emphasis mt-12 text-base font-semibold leading-5">
                 {t("check_for_conflicts")}
               </h4>
               <p className="pb-2 text-sm leading-5 text-gray-600">{t("select_calendars")}</p>
@@ -131,7 +131,7 @@ const CalendarsView = () => {
                               trashIcon
                               onSuccess={() => query.refetch()}
                               buttonProps={{
-                                className: "border border-gray-300 py-[2px]",
+                                className: "border border-default py-[2px]",
                                 color: "secondary",
                               }}
                             />
@@ -167,12 +167,12 @@ const CalendarsView = () => {
                             <DisconnectIntegration
                               trashIcon
                               credentialId={item.credentialId}
-                              buttonProps={{ className: "border border-gray-300" }}
+                              buttonProps={{ className: "border border-default" }}
                             />
                           </div>
                         </div>
                         <div className="w-full border-t border-gray-200">
-                          <p className="px-2 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                          <p className="text-subtle px-2 pt-4 text-sm">{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 4adb47c02c..df884c0a37 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -89,7 +89,7 @@ const ConferencingLayout = () => {
     return <SkeletonLoader title={t("conferencing")} description={t("conferencing_description")} />;
 
   return (
-    <div className="w-full bg-white sm:mx-0 xl:mt-0">
+    <div className="w-full bg-default sm:mx-0 xl:mt-0">
       <Meta title={t("conferencing")} description={t("conferencing_description")} />
       <List>
         {apps?.items &&
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index b7897bdbe0..408d14e356 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -142,7 +142,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         name="locale"
         render={({ field: { value, onChange } }) => (
           <>
-            <Label className="text-gray-900">
+            <Label className="text-emphasis">
               <>{t("language")}</>
             </Label>
             <Select<{ label: string; value: string }>
@@ -159,7 +159,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         control={formMethods.control}
         render={({ field: { value } }) => (
           <>
-            <Label className="mt-8 text-gray-900">
+            <Label className="text-emphasis mt-8">
               <>{t("timezone")}</>
             </Label>
             <TimezoneSelect
@@ -177,7 +177,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         control={formMethods.control}
         render={({ field: { value } }) => (
           <>
-            <Label className="mt-8 text-gray-900">
+            <Label className="text-emphasis mt-8">
               <>{t("time_format")}</>
             </Label>
             <Select
@@ -190,7 +190,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
           </>
         )}
       />
-      <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
+      <div className="text-gray text-default mt-2 flex items-center text-sm">
         {t("timeformat_profile_hint")}
       </div>
       <Controller
@@ -198,7 +198,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         control={formMethods.control}
         render={({ field: { value } }) => (
           <>
-            <Label className="mt-8 text-gray-900">
+            <Label className="text-emphasis mt-8">
               <>{t("start_of_week")}</>
             </Label>
             <Select
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index f8c7f84ce7..da2be3ff47 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -68,7 +68,7 @@ const ProfileImpersonationView = () => {
             fitToHeight={true}
           />
           <div className="flex flex-col">
-            <Skeleton as={Label} className="text-sm font-semibold leading-none text-black">
+            <Skeleton as={Label} className="text-emphasis text-sm font-semibold leading-none">
               {t("user_impersonation_heading")}
             </Skeleton>
             <Skeleton as="p" className="-mt-2 text-sm leading-normal text-gray-600">
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index a81cde94fc..5d6b149cd0 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -112,13 +112,13 @@ const PasswordView = () => {
       {user && user.identityProvider !== IdentityProvider.CAL ? (
         <div>
           <div className="mt-6">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">
               {t("account_managed_by_identity_provider", {
                 provider: identityProviderNameMap[user.identityProvider],
               })}
             </h2>
           </div>
-          <p className="mt-1 text-sm text-gray-500">
+          <p className="text-subtle mt-1 text-sm">
             {t("account_managed_by_identity_provider_description", {
               provider: identityProviderNameMap[user.identityProvider],
             })}
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 0fac2ad1e4..a02861baa4 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -73,20 +73,20 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
   return (
     <LicenseRequired>
       <div
-        className="flex min-h-screen flex-col justify-center bg-gray-50 py-12 sm:px-6 lg:px-8"
+        className="bg-muted flex min-h-screen flex-col justify-center py-12 sm:px-6 lg:px-8"
         aria-labelledby="modal-title"
         role="dialog"
         aria-modal="true">
         <HeadSeo title={t("sign_up")} description={t("sign_up")} />
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
-          <h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">
+          <h2 className="font-cal text-emphasis text-center text-3xl font-extrabold">
             {t("create_your_account")}
           </h2>
         </div>
         <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-          <div className="mx-2 bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
+          <div className="bg-default mx-2 px-4 py-8 shadow sm:rounded-lg sm:px-10">
             <FormProvider {...methods}>
-              <form onSubmit={methods.handleSubmit(signUp)} className="space-y-6 bg-white">
+              <form onSubmit={methods.handleSubmit(signUp)} className="bg-default space-y-6">
                 {errors.apiError && <Alert severity="error" message={errors.apiError?.message} />}
                 <div className="space-y-2">
                   <TextField
@@ -97,14 +97,14 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
                   <EmailField
                     {...register("email")}
                     disabled={prepopulateFormValues?.email}
-                    className="disabled:bg-gray-200 disabled:hover:cursor-not-allowed"
+                    className="disabled:bg-emphasis disabled:hover:cursor-not-allowed"
                   />
                   <PasswordField
                     labelProps={{
-                      className: "block text-sm font-medium text-gray-700",
+                      className: "block text-sm font-medium text-default",
                     }}
                     {...register("password")}
-                    className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                    className="border-default mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
                   />
                   <PasswordField
                     label={t("confirm_password")}
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index fc4986ceb9..4eedf8ac8e 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -45,8 +45,8 @@ function TeamPage({ team }: TeamPageProps) {
         <li
           key={index}
           className={classNames(
-            "dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50",
-            !isEmbed && "bg-white"
+            "dark:bg-darkgray-100 dark:border-darkgray-300 bg-default hover:bg-muted group relative border-b border-gray-200 first:rounded-t-md last:rounded-b-md last:border-b-0",
+            !isEmbed && "bg-default"
           )}>
           <div className="px-6 py-4 ">
             <Link
@@ -55,7 +55,7 @@ function TeamPage({ team }: TeamPageProps) {
               className="flex justify-between">
               <div className="flex-shrink">
                 <div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
-                  <h2 className="dark:text-darkgray-700 text-sm font-semibold text-gray-700">{type.title}</h2>
+                  <h2 className="dark:text-darkgray-700 text-default text-sm font-semibold">{type.title}</h2>
                 </div>
                 <EventTypeDescription className="text-sm" eventType={type} />
               </div>
@@ -92,16 +92,16 @@ function TeamPage({ team }: TeamPageProps) {
           profile: { name: `${team.name}`, image: getPlaceholderAvatar(team.logo, team.name) },
         }}
       />
-      <main className="dark:bg-darkgray-50 mx-auto max-w-3xl rounded-md bg-gray-100 px-4 pt-12 pb-12">
+      <main className="dark:bg-darkgray-50 bg-subtle mx-auto max-w-3xl rounded-md px-4 pt-12 pb-12">
         <div className="max-w-96 mx-auto mb-8 text-center">
           <Avatar alt={teamName} imageSrc={getPlaceholderAvatar(team.logo, team.name)} size="lg" />
-          <p className="font-cal dark:text-darkgray-900 mb-2 text-2xl tracking-wider text-gray-900">
+          <p className="font-cal dark:text-darkgray-900 text-emphasis mb-2 text-2xl tracking-wider">
             {teamName}
           </p>
           {!isBioEmpty && (
             <>
               <div
-                className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                className="dark:text-darkgray-600 text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                 dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
               />
             </>
@@ -119,13 +119,13 @@ function TeamPage({ team }: TeamPageProps) {
                     <div className="dark:border-darkgray-300 w-full border-t border-gray-200" />
                   </div>
                   <div className="relative flex justify-center">
-                    <span className="dark:bg-darkgray-50 bg-gray-100 px-2 text-sm text-gray-500 dark:text-white">
+                    <span className="dark:bg-darkgray-50 bg-subtle text-subtle dark:text-inverted px-2 text-sm">
                       {t("or")}
                     </span>
                   </div>
                 </div>
 
-                <aside className="mt-8 flex justify-center text-center dark:text-white">
+                <aside className="dark:text-inverted mt-8 flex justify-center text-center">
                   <Button
                     color="minimal"
                     EndIcon={FiArrowRight}
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index 8ff650478b..64f5913537 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -23,16 +23,16 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                 &#8203;
               </span>
               <div
-                className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
+                className="bg-default inline-block transform overflow-hidden rounded-lg px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                  <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <FiX className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                    <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
                       This meeting is in the past.
                     </h3>
                   </div>
@@ -40,7 +40,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                     <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
                       {props.booking.title}
                     </h2>
-                    <p className="text-center text-gray-500">
+                    <p className="text-subtle text-center">
                       <FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
                       {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
                     </p>
diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx
index 87c361e926..a4cd8ce47f 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -21,16 +21,16 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                 &#8203;
               </span>
               <div
-                className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
+                className="bg-default inline-block transform overflow-hidden rounded-lg px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                  <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <FiX className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                    <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
                       This meeting has not started yet
                     </h3>
                   </div>
@@ -38,13 +38,13 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                     <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
                       {props.booking.title}
                     </h2>
-                    <p className="text-center text-gray-500">
+                    <p className="text-subtle text-center">
                       <FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
                       {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
                     </p>
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <p className="text-sm text-gray-500">
+                    <p className="text-subtle text-sm">
                       This meeting will be accessible 60 minutes in advance.
                     </p>
                   </div>
diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx
index a09d56100d..82fe498582 100644
--- a/apps/web/pages/video/no-meeting-found.tsx
+++ b/apps/web/pages/video/no-meeting-found.tsx
@@ -16,21 +16,21 @@ export default function NoMeetingFound() {
                 &#8203;
               </span>
               <div
-                className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
+                className="bg-default inline-block transform overflow-hidden rounded-lg px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                  <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <FiX className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
-                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
+                    <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
                       {t("no_meeting_found")}
                     </h3>
                   </div>
                   <div className="mt-2">
-                    <p className="text-center text-sm text-gray-500">{t("no_meeting_found_description")}</p>
+                    <p className="text-subtle text-center text-sm">{t("no_meeting_found_description")}</p>
                   </div>
                 </div>
                 <div className="mt-5 text-center sm:mt-6">
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 870aefe1f8..bfaa250b39 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -3,18 +3,57 @@
 @tailwind utilities;
 
 
+@layer {
+  :root {
+    /* background */
+
+    --cal-bg-emphasis: #E5E7EB;
+    --cal-bg: white;
+    --cal-bg-subtle: #F3F4F6;
+    --cal-bg-muted: #F9FAFB;
+    --cal-bg-inverted: #111827;
+
+    /* background -> components*/
+    --cal-bg-info: #DEE9FC;
+    --cal-bg-success: #E2FBE8;
+    --cal-bg-attention: #FCEED8;
+    --cal-bg-error: #F9E3E2;
+
+
+    /* Borders */
+    --cal-border-emphasis:#9CA3AF;
+    --cal-border: #D1D5DB;
+    --cal-border-subtle:#E5E7EB;
+    --cal-border-muted:#F3F4F6;
+
+    /* Content/Text */
+    --cal-text-emphasis: #111827;
+    --cal-text:#374151;
+    --cal-text-subtle:#6B7280;
+    --cal-text-muted:#9CA3AF;
+    --cal-text-inverted:white;
+
+    /* Content/Text -> components */
+    --cal-text-info:#253985;
+    --cal-text-success:#285231;
+    --cal-text-attention:#73321B;
+    --cal-text-error:#752522;
+
+    /* Brand shinanigans
+      -> These will be computed for the users theme at runtime.
+    */
+    --cal-brand:#111827;
+    --cal-brand-emphasis:#101010;
+  }
+}
+
+
 
 body  {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
 
-:root {
-  --brand-color: #292929;
-  --brand-text-color: #ffffff;
-  --brand-color-dark-mode: #fafafa;
-  --brand-text-color-dark-mode: #292929;
-}
 
 /*
   Desktop App specific CSS
@@ -160,7 +199,7 @@ input[type='text']:focus { box-shadow: none; }
 
 
 button[role="switch"][data-state="checked"] {
-  @apply bg-gray-900;
+  @apply bg-inverted;
 }
 /* TODO: avoid global specific css */
 /* button[role="switch"][data-state="checked"] span {
@@ -173,7 +212,7 @@ button[role="switch"][data-state="checked"] {
  */
 .react-daterange-picker > .react-daterange-picker__wrapper {
   /* border consistent with other inputs */
-  @apply rounded-sm border-gray-300 px-2 py-1.5 text-sm lg:py-1;
+  @apply rounded-sm border-default px-2 py-1.5 text-sm lg:py-1;
 }
 
 .react-daterange-picker > .react-daterange-picker__wrapper input {
@@ -242,52 +281,7 @@ button[role="switch"][data-state="checked"] {
   }
 }
 
-.react-multi-email > [type="text"] {
-  @apply dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-white block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500;
-}
-
-.react-multi-email [data-tag] {
-  box-shadow: none !important;
-  @apply dark:bg-brand my-1 inline-flex items-center rounded-md border border-transparent bg-gray-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:text-white;
-}
-
-.react-multi-email > span[data-placeholder] {
-  display: none;
-  position: absolute;
-  left: 0.8rem;
-  top: 0.75rem;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-}
-
-.react-multi-email.empty > span[data-placeholder] {
-  display: inline;
-  color: #646b7a;
-}
-
-.react-multi-email.focused > span[data-placeholder] {
-  display: none;
-}
-
-.react-multi-email > input {
-  width: 100% !important;
-  display: inline-block !important;
-  @apply mt-1;
-}
-
-.react-multi-email [data-tag] {
-  @apply my-1 inline-flex items-center rounded-md border border-transparent bg-gray-200 px-2 py-1 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 ltr:mr-2 rtl:ml-2 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-700;
-}
-
-.react-multi-email [data-tag] [data-tag-item] {
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.react-multi-email [data-tag] [data-tag-handle] {
-  margin-left: 0.833em;
-  cursor: pointer;
-}
+/* TODO: implement styling for react-multi-email */
 
 /* !important to override react-dates */
 .DateRangePickerInput__withBorder {
@@ -381,26 +375,26 @@ button[role="switch"][data-state="checked"] {
 }
 
 nav#nav--settings > a {
-  @apply flex items-center border-l-4 border-transparent px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 hover:text-gray-900;
+  @apply flex items-center border-l-4 border-transparent px-3 py-2 text-sm font-medium text-emphasis hover:bg-muted hover:text-emphasis;
 }
 
 nav#nav--settings > a svg {
-  @apply mr-3 -ml-1 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500;
+  @apply mr-3 -ml-1 h-6 w-6 flex-shrink-0 text-muted group-hover:text-subtle;
 }
 
 nav#nav--settings > a.active {
-  @apply border-gray-500 bg-gray-50 text-gray-700 hover:bg-gray-50 hover:text-gray-700;
+  @apply border-gray-500 bg-muted text-default hover:bg-muted hover:text-default;
 }
 
 nav#nav--settings > a.active svg {
-  @apply text-gray-500;
+  @apply text-subtle;
 }
 
 hr {
   @apply border-gray-200;
 }
 
-.text-white-important {
+.text-inverted-important {
   color: white !important;
 }
 
diff --git a/packages/app-store/_components/AppCard.tsx b/packages/app-store/_components/AppCard.tsx
index 0b9ac3125d..a8c5a6e914 100644
--- a/packages/app-store/_components/AppCard.tsx
+++ b/packages/app-store/_components/AppCard.tsx
@@ -36,7 +36,7 @@ export default function AppCard({
             <img className="w-full" src={app?.logo} alt={app?.name} />
           </Link>
           <div className="flex flex-col">
-            <span className="text-base font-semibold leading-4 text-black">{app?.name}</span>
+            <span className="text-emphasis text-base font-semibold leading-4">{app?.name}</span>
             <p className="mb-2 pt-2 text-sm font-normal text-gray-600 ltr:pr-2 rtl:pl-2">
               {description || app?.description}
             </p>
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index a0e0500c47..6811838148 100644
--- a/packages/app-store/applecalendar/pages/setup/index.tsx
+++ b/packages/app-store/applecalendar/pages/setup/index.tsx
@@ -20,8 +20,8 @@ export default function AppleCalendarSetup() {
   const [errorMessage, setErrorMessage] = useState("");
 
   return (
-    <div className="flex h-screen bg-gray-200">
-      <div className="m-auto rounded bg-white p-5 md:w-[560px] md:p-10">
+    <div className="flex h-screen bg-emphasis">
+      <div className="m-auto rounded bg-default p-5 md:w-[560px] md:p-10">
         <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx
index 3e30981397..ed8c2b5104 100644
--- a/packages/app-store/caldavcalendar/pages/setup/index.tsx
+++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx
@@ -21,8 +21,8 @@ export default function CalDavCalendarSetup() {
   const [errorActionUrl, setErrorActionUrl] = useState("");
 
   return (
-    <div className="flex h-screen bg-gray-200">
-      <div className="m-auto rounded bg-white p-5 md:w-[560px] md:p-10">
+    <div className="flex h-screen bg-emphasis">
+      <div className="m-auto rounded bg-default p-5 md:w-[560px] md:p-10">
         <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index b80a752c92..4b1b256284 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -35,8 +35,8 @@ export default function CloseComSetup() {
   }, [testPassed]);
 
   return (
-    <div className="flex h-screen bg-gray-200">
-      <div className="m-auto rounded bg-white p-5 md:w-[520px] md:p-10">
+    <div className="bg-emphasis flex h-screen">
+      <div className="bg-default m-auto rounded p-5 md:w-[520px] md:p-10">
         <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
@@ -111,8 +111,8 @@ export default function CloseComSetup() {
                     className={
                       testPassed !== undefined
                         ? testPassed
-                          ? " !bg-green-100 !text-green-700 hover:bg-green-100"
-                          : "!border-red-700 bg-red-100 !text-red-700 hover:bg-red-100"
+                          ? " !bg-success hover:bg-success !text-green-700"
+                          : "bg-error hover:bg-error !border-red-700 !text-red-700"
                         : "secondary"
                     }
                     color={testPassed === true ? "minimal" : "secondary"}
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index d2e88d4f6b..eb18af52c9 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -91,9 +91,7 @@ export const AppDependencyComponent = ({
     <div
       className={classNames(
         "rounded-md py-3 px-4",
-        dependencyData && dependencyData.some((dependency) => !dependency.installed)
-          ? "bg-blue-100"
-          : "bg-gray-100"
+        dependencyData && dependencyData.some((dependency) => !dependency.installed) ? "bg-info" : "bg-subtle"
       )}>
       {dependencyData &&
         dependencyData.map((dependency) => {
@@ -122,7 +120,7 @@ export const AppDependencyComponent = ({
             </div>
           ) : (
             <div className="items-start space-x-2.5">
-              <div className="flex items-start text-blue-900">
+              <div className="text-info flex items-start">
                 <div>
                   <FiAlertCircle className="mt-1 mr-2 font-semibold" />
                 </div>
@@ -136,7 +134,7 @@ export const AppDependencyComponent = ({
                       <>
                         <Link
                           href={`${CAL_URL}/apps/${dependency.slug}`}
-                          className="flex items-center text-blue-900 underline">
+                          className="text-info flex items-center underline">
                           <span className="mr-1">
                             {t("connect_app", { dependencyName: dependency.name })}
                           </span>
diff --git a/packages/app-store/exchange2013calendar/pages/setup/index.tsx b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
index 15b6c8383c..9e15166c9b 100644
--- a/packages/app-store/exchange2013calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2013calendar/pages/setup/index.tsx
@@ -20,8 +20,8 @@ export default function Exchange2013CalendarSetup() {
   const [errorMessage, setErrorMessage] = useState("");
 
   return (
-    <div className="flex h-screen bg-gray-200">
-      <div className="m-auto rounded bg-white p-5 md:w-[560px] md:p-10">
+    <div className="flex h-screen bg-emphasis">
+      <div className="m-auto rounded bg-default p-5 md:w-[560px] md:p-10">
         <div>
           <img
             src="/api/app-store/exchange2013calendar/icon.svg"
diff --git a/packages/app-store/exchange2016calendar/pages/setup/index.tsx b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
index 52d2ea5283..4b626c416b 100644
--- a/packages/app-store/exchange2016calendar/pages/setup/index.tsx
+++ b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
@@ -20,8 +20,8 @@ export default function Exchange2016CalendarSetup() {
   const [errorMessage, setErrorMessage] = useState("");
 
   return (
-    <div className="flex h-screen bg-gray-200">
-      <div className="m-auto rounded bg-white p-5 md:w-[560px] md:p-10">
+    <div className="flex h-screen bg-emphasis">
+      <div className="m-auto rounded bg-default p-5 md:w-[560px] md:p-10">
         <div>
           <img
             src="/api/app-store/exchange2016calendar/icon.svg"
diff --git a/packages/app-store/exchangecalendar/pages/setup/index.tsx b/packages/app-store/exchangecalendar/pages/setup/index.tsx
index 0f1a9c6691..c3e2b531c2 100644
--- a/packages/app-store/exchangecalendar/pages/setup/index.tsx
+++ b/packages/app-store/exchangecalendar/pages/setup/index.tsx
@@ -42,8 +42,8 @@ export default function ExchangeSetup() {
   ];
   return (
     <>
-      <div className="flex h-screen bg-gray-200">
-        <div className="m-auto rounded bg-white p-5 md:w-[560px] md:p-10">
+      <div className="flex h-screen bg-emphasis">
+        <div className="m-auto rounded bg-default p-5 md:w-[560px] md:p-10">
           <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
             <div>
               {/* eslint-disable @next/next/no-img-element */}
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index 249fbfdd7a..9b53eba716 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -88,7 +88,7 @@ export const SearchDialog = (props: ISearchDialog) => {
     <div
       className={classNames(
         "flex cursor-pointer items-center border-b-2 p-2 text-sm",
-        selectedMode === mode ? "border-black" : "border-transparent text-gray-500"
+        selectedMode === mode ? "border-black" : "text-subtle border-transparent"
       )}
       onClick={() => {
         setKeyword("");
@@ -113,10 +113,10 @@ export const SearchDialog = (props: ISearchDialog) => {
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
-        <h3 className="leading-16 font-cal text-xl text-gray-900" id="modal-title">
+        <h3 className="leading-16 font-cal text-emphasis text-xl" id="modal-title">
           {t("add_gif_to_confirmation")}
         </h3>
-        <p className="mb-3 text-sm font-light text-gray-500">{t("find_gif_spice_confirmation")}</p>
+        <p className="text-subtle mb-3 text-sm font-light">{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)}
@@ -127,7 +127,7 @@ export const SearchDialog = (props: ISearchDialog) => {
           <div className="relative block w-full pt-2">
             <input
               type="text"
-              className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
+              className="border-default block w-full rounded-sm shadow-sm sm:text-sm"
               placeholder={
                 selectedMode === MODE_SEARCH
                   ? t("search_giphy")
@@ -145,11 +145,11 @@ export const SearchDialog = (props: ISearchDialog) => {
         </form>
         {gifImage && (
           <div className="flex flex-col items-center space-x-2 space-y-2 pt-3 rtl:space-x-reverse">
-            <div className="flex w-full items-center justify-center bg-gray-100">
+            <div className="bg-subtle flex w-full items-center justify-center">
               {isLoading ? (
                 <div className="flex h-[200px] w-full items-center justify-center bg-gray-400 pt-3 pb-3">
                   <svg
-                    className={classNames("mx-4 h-5 w-5 animate-spin", "text-white dark:text-black")}
+                    className={classNames("mx-4 h-5 w-5 animate-spin", "text-inverted dark:text-emphasis")}
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24">
@@ -177,7 +177,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-gray-500">Not the perfect GIF?</div>
+            <div className="text-subtle text-sm font-light">Not the perfect GIF?</div>
             <Button
               size="sm"
               color="secondary"
diff --git a/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx b/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
index d6edc878b3..c43eb2fe7f 100644
--- a/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
+++ b/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
@@ -8,7 +8,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
   const { t } = useLocale();
 
   return gCalInstalled ? (
-    <div className="rounded-md bg-gray-100 py-3 px-4">
+    <div className="bg-subtle rounded-md py-3 px-4">
       <div className="items-start space-x-2.5">
         <div className="flex items-start">
           <div>
@@ -26,7 +26,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
       </div>
     </div>
   ) : (
-    <div className="rounded-md bg-blue-100 py-3 px-4 text-blue-900">
+    <div className="bg-info text-info rounded-md py-3 px-4">
       <div className="items-start space-x-2.5">
         <div className="flex items-start">
           <div>
@@ -39,7 +39,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
                 <>
                   <Link
                     href={`${CAL_URL}/apps/google-calendar`}
-                    className="flex items-center text-blue-900 underline">
+                    className="text-info flex items-center underline">
                     <span className="mr-1">{t("connect_google_calendar")}</span>
                     <FiArrowRight />
                   </Link>
diff --git a/packages/app-store/qr_code/components/EventTypeAppCardInterface.tsx b/packages/app-store/qr_code/components/EventTypeAppCardInterface.tsx
index e716cca742..e88c36e945 100644
--- a/packages/app-store/qr_code/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/qr_code/components/EventTypeAppCardInterface.tsx
@@ -19,7 +19,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       <Tooltip content={eventTypeURL}>
         <a download href={QR_URL} target="_blank" rel="noreferrer">
           <img
-            className="border hover:bg-gray-50 hover:shadow-sm"
+            className="hover:bg-muted border hover:shadow-sm"
             style={{ padding: size / 16, borderRadius: size / 20 }}
             width={size}
             src={QR_URL}
diff --git a/packages/app-store/rainbow/components/RainbowInstallForm.tsx b/packages/app-store/rainbow/components/RainbowInstallForm.tsx
index 3de2c3e518..fa51f88a96 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-gray-700">
+          <label htmlFor="blockchainId" className="text-default flex text-sm font-medium">
             {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-gray-700">
+          <label htmlFor="smartContractAddress" className="text-default flex text-sm font-medium">
             {t("token_address")}
           </label>
         </div>
@@ -46,7 +46,7 @@ const RainbowInstallForm: React.FC<RainbowInstallFormProps> = ({
           <div className="relative mt-1 rounded-sm">
             <input
               type="text"
-              className="block w-full rounded-sm border-gray-300 text-sm "
+              className="border-default block w-full rounded-sm text-sm "
               placeholder={t("Example: 0x71c7656ec7ab88b098defb751b7401b5f6d8976f")}
               defaultValue={(smartContractAddress || "") as string}
               onChange={(e) => {
diff --git a/packages/app-store/rainbow/components/RainbowKit.tsx b/packages/app-store/rainbow/components/RainbowKit.tsx
index 4ed15cfbfe..1ee0062da0 100644
--- a/packages/app-store/rainbow/components/RainbowKit.tsx
+++ b/packages/app-store/rainbow/components/RainbowKit.tsx
@@ -111,9 +111,9 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
   return (
     <main className="mx-auto max-w-3xl py-24 px-4">
       <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">
+        <div className="hover:border-brand-default dark:bg-darkgray-100 bg-default hover:bg-default flex min-h-[120px] grow flex-col border-b border-neutral-200 p-6 text-center first:rounded-t-md last:rounded-b-md last:border-b-0 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-gray-900 dark:text-white">Token Gate</h2>
+            <h2 className="text-emphasis dark:text-inverted mb-2 grow font-semibold">Token Gate</h2>
             {isLoading && (
               <>
                 <SkeletonText className="mb-3 h-1 w-full" />
@@ -122,7 +122,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
             )}
             {!isLoading && contractData && contractData.data && (
               <>
-                <p className="text-gray-300 dark:text-white">
+                <p className="dark:text-inverted text-gray-300">
                   <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/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index 826e2c92d7..abb7f43b81 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -89,11 +89,11 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
     <Dialog name="new-form" clearQueryParamsOnClose={["target", "action"]}>
       <DialogContent className="overflow-y-auto">
         <div className="mb-4">
-          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+          <h3 className="text-emphasis text-lg font-bold leading-6" id="modal-title">
             {t("add_new_form")}
           </h3>
           <div>
-            <p className="text-sm text-gray-500">{t("form_description")}</p>
+            <p className="text-subtle text-sm">{t("form_description")}</p>
           </div>
         </div>
         <Form
@@ -414,7 +414,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
           return <></>;
         }
         return (
-          <div {...restProps} className="self-center rounded-md p-2 hover:bg-gray-200">
+          <div {...restProps} className="hover:bg-emphasis self-center rounded-md p-2">
             <Switch
               checked={!routingForm.disabled}
               label={label}
diff --git a/packages/app-store/routing-forms/components/FormInputFields.tsx b/packages/app-store/routing-forms/components/FormInputFields.tsx
index a692e2a4be..82fd8785f1 100644
--- a/packages/app-store/routing-forms/components/FormInputFields.tsx
+++ b/packages/app-store/routing-forms/components/FormInputFields.tsx
@@ -43,7 +43,7 @@ export default function FormInputFields(props: Props) {
               <label
                 id="slug-label"
                 htmlFor="slug"
-                className="flex text-sm font-medium text-gray-700 dark:text-white">
+                className="text-default dark:text-inverted flex text-sm font-medium">
                 {field.label}
               </label>
             </div>
diff --git a/packages/app-store/routing-forms/components/SingleForm.tsx b/packages/app-store/routing-forms/components/SingleForm.tsx
index 126e220d43..e06bd7c2d6 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -309,7 +309,9 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
 
                   {form.routers.length ? (
                     <div className="mt-6">
-                      <div className="mb-2 block text-sm font-semibold leading-none text-black ">Routers</div>
+                      <div className="text-emphasis mb-2 block text-sm font-semibold leading-none ">
+                        Routers
+                      </div>
                       <p className="-mt-1 text-xs leading-normal text-gray-600">
                         {t("modifications_in_fields_warning")}
                       </p>
@@ -329,7 +331,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
 
                   {connectedForms?.length ? (
                     <div className="mt-6">
-                      <div className="mb-2 block text-sm font-semibold leading-none text-black ">
+                      <div className="text-emphasis mb-2 block text-sm font-semibold leading-none ">
                         {t("connected_forms")}
                       </div>
                       <p className="-mt-1 text-xs leading-normal text-gray-600">
@@ -391,7 +393,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
               </div>
               <div>
                 {decidedAction && (
-                  <div className="mt-5 rounded-md bg-gray-100 p-3">
+                  <div className="bg-subtle mt-5 rounded-md p-3">
                     <div className="font-bold ">{t("route_to")}:</div>
                     <div className="mt-2">
                       {RoutingPages.map((page) => {
@@ -404,11 +406,11 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                       })}
                       :{" "}
                       {decidedAction.type === "customPageMessage" ? (
-                        <span className="text-gray-700" data-testid="test-routing-result">
+                        <span className="text-default" data-testid="test-routing-result">
                           {decidedAction.value}
                         </span>
                       ) : decidedAction.type === "externalRedirectUrl" ? (
-                        <span className="text-gray-700 underline">
+                        <span className="text-default underline">
                           <a
                             target="_blank"
                             data-testid="test-routing-result"
@@ -423,7 +425,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                           </a>
                         </span>
                       ) : (
-                        <span className="text-gray-700 underline">
+                        <span className="text-default underline">
                           <a
                             target="_blank"
                             href={`/${decidedAction.value}`}
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
index 333cd8f42d..f8097ec572 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -85,7 +85,7 @@ const TextAreaWidget = (props: TextLikeComponentPropsRAQB) => {
       disabled={readOnly}
       onChange={onChange}
       maxLength={maxLength}
-      className="dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="dark:placeholder:text-darkgray-600 focus:border-brand-default dark:border-darkgray-300 dark:text-darkgray-900 border-default disabled:bg-emphasis disabled:dark:text-subtle block w-full rounded-md text-sm focus:ring-black disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500"
       {...customProps}
       {...remainingProps}
     />
@@ -112,7 +112,7 @@ const TextWidget = (props: TextLikeComponentPropsRAQB) => {
     <TextField
       containerClassName="w-full"
       type={type}
-      className="dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="dark:placeholder:text-darkgray-600 focus:border-brand-default dark:border-darkgray-300 dark:text-darkgray-900 border-default disabled:bg-emphasis disabled:dark:text-subtle block w-full rounded-md text-sm focus:ring-black disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500"
       value={textValue}
       labelSrOnly={noLabel}
       placeholder={placeholder}
@@ -130,7 +130,7 @@ function NumberWidget({ value, setValue, ...remainingProps }: TextLikeComponentP
       type="number"
       labelSrOnly={remainingProps.noLabel}
       containerClassName="w-full"
-      className="dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500"
+      className="dark:placeholder:text-darkgray-600 focus:border-brand-default dark:border-darkgray-300 dark:text-darkgray-900 border-default disabled:bg-emphasis disabled:dark:text-subtle block w-full rounded-md text-sm focus:ring-black disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500"
       value={value}
       onChange={(e) => {
         setValue(e.target.value);
@@ -162,7 +162,7 @@ const MultiSelectWidget = ({
 
   return (
     <Select
-      className="dark:border-darkgray-300 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 dark:bg-transparent dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm"
+      className="dark:border-darkgray-300 border-default disabled:dark:text-subtle dark:text-inverted mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm dark:bg-transparent dark:selection:bg-green-500 sm:text-sm"
       onChange={(items) => {
         setValue(items?.map((item) => item.value));
       }}
@@ -189,7 +189,7 @@ function SelectWidget({ listValues, setValue, value, ...remainingProps }: Select
 
   return (
     <Select
-      className="data-testid-select dark:border-darkgray-300 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 dark:bg-transparent dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm"
+      className="data-testid-select dark:border-darkgray-300 border-default disabled:dark:text-subtle dark:text-inverted mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm dark:bg-transparent dark:selection:bg-green-500 sm:text-sm"
       onChange={(item) => {
         if (!item) {
           return;
@@ -208,7 +208,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   if (type === "delRule" || type == "delGroup") {
     return (
       <button className="ml-5">
-        <FiTrash className="m-0 h-4 w-4 text-gray-500" onClick={onClick} />
+        <FiTrash className="text-subtle m-0 h-4 w-4" onClick={onClick} />
       </button>
     );
   }
diff --git a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
index cdcc5944cd..c7c4bc8132 100644
--- a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
@@ -113,7 +113,7 @@ export default function RoutingForms({
               </Button>
               <Button
                 color="minimal"
-                className="!bg-transparent text-white opacity-50 hover:opacity-100"
+                className="text-inverted !bg-transparent opacity-50 hover:opacity-100"
                 href="https://go.cal.com/teams-video"
                 target="_blank">
                 {t("learn_more")}
@@ -133,7 +133,7 @@ export default function RoutingForms({
                 />
               ) : null}
               {forms?.length ? (
-                <div className="mb-16 overflow-hidden bg-white">
+                <div className="bg-default mb-16 overflow-hidden">
                   <List data-testid="routing-forms-list">
                     {forms.map((form, index) => {
                       if (!form) {
diff --git a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
index 695afe8b7b..5beb763e95 100644
--- a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
@@ -64,12 +64,12 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
     <div className="w-full max-w-[2000px] overflow-x-scroll">
       <table
         data-testid="reporting-table"
-        className="table-fixed border-separate border-spacing-0 rounded-md border border-gray-300 bg-gray-100">
-        <tr data-testid="reporting-header" className="border-b border-gray-300 bg-gray-200">
+        className="border-default bg-subtle table-fixed border-separate border-spacing-0 rounded-md border">
+        <tr data-testid="reporting-header" className="border-default bg-emphasis border-b">
           {headers.current?.map((header, index) => (
             <th
               className={classNames(
-                "border-b border-gray-300 py-3 px-2  text-left text-base font-medium",
+                "border-default border-b py-3 px-2  text-left text-base font-medium",
                 index !== (headers.current?.length || 0) - 1 ? "border-r" : ""
               )}
               key={index}>
@@ -87,7 +87,7 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
                   data-testid="reporting-row"
                   className={classNames(
                     "text-center text-sm",
-                    rowIndex % 2 ? "" : "bg-white",
+                    rowIndex % 2 ? "" : "bg-default",
                     isLastRow ? "" : "border-b"
                   )}>
                   {responses.map((r, columnIndex) => {
@@ -95,7 +95,7 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
                     return (
                       <td
                         className={classNames(
-                          "overflow-x-hidden border-gray-300 py-3 px-2 text-left",
+                          "border-default overflow-x-hidden py-3 px-2 text-left",
                           isLastRow ? "" : "border-b",
                           isLastColumn ? "" : "border-r"
                         )}
diff --git a/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx b/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
index 6abfdc90e7..25ade305c1 100644
--- a/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
@@ -143,7 +143,7 @@ const Route = ({
                 <span className="font-semibold">{route.name}</span>
               </Badge>
             </Link>
-            <p className="mt-2 text-sm text-gray-500">
+            <p className="text-subtle mt-2 text-sm">
               Fields available in <span className="font-bold">{route.name}</span> will be added to this form.
             </p>
           </div>
@@ -168,7 +168,7 @@ const Route = ({
       <div className="-mx-4 mb-4 flex w-full items-center sm:mx-0">
         <div className="cal-query-builder w-full ">
           <div>
-            <div className="flex w-full items-center text-sm text-gray-900">
+            <div className="text-emphasis flex w-full items-center text-sm">
               <div className="flex flex-grow-0 whitespace-nowrap">
                 <span>Send Booker to</span>
               </div>
@@ -202,7 +202,7 @@ const Route = ({
                     required
                     disabled={disabled}
                     name="customPageMessage"
-                    className="flex w-full flex-grow border-gray-300"
+                    className="border-default flex w-full flex-grow"
                     value={route.action.value}
                     onChange={(e) => {
                       setRoute(route.id, { action: { ...route.action, value: e.target.value } });
@@ -212,7 +212,7 @@ const Route = ({
                   <TextField
                     disabled={disabled}
                     name="externalRedirectUrl"
-                    className="flex w-full flex-grow border-gray-300 text-sm"
+                    className="border-default flex w-full flex-grow text-sm"
                     containerClassName="w-full mt-2"
                     type="text"
                     required
diff --git a/packages/app-store/routing-forms/pages/router/[...appPages].tsx b/packages/app-store/routing-forms/pages/router/[...appPages].tsx
index 85ed598a6c..170029900b 100644
--- a/packages/app-store/routing-forms/pages/router/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/router/[...appPages].tsx
@@ -17,7 +17,7 @@ export default function Router({ form, message }: inferSSRProps<typeof getServer
       </Head>
       <div className="mx-auto my-0 max-w-3xl md:my-24">
         <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
-          <div className="-mx-4 rounded-sm border border-neutral-200 bg-white p-4 py-6 sm:mx-0 sm:px-8">
+          <div className="-mx-4 rounded-sm border border-neutral-200 bg-default p-4 py-6 sm:mx-0 sm:px-8">
             <div>{message}</div>
           </div>
         </div>
diff --git a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
index 8c09ccd342..07aae61cad 100644
--- a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
@@ -104,16 +104,16 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe
             </Head>
             <div className={classNames("mx-auto my-0 max-w-3xl", isEmbed ? "" : "md:my-24")}>
               <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
-                <div className="main border-bookinglightest dark:bg-darkgray-100 sm:dark:border-darkgray-300 mx-0 rounded-md bg-white p-4 py-6 sm:-mx-4 sm:px-8 md:border">
+                <div className="main border-bookinglightest dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-default mx-0 rounded-md p-4 py-6 sm:-mx-4 sm:px-8 md:border">
                   <Toaster position="bottom-right" />
 
                   <form onSubmit={handleOnSubmit}>
                     <div className="mb-8">
-                      <h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-gray-900 dark:text-white">
+                      <h1 className="font-cal text-emphasis dark:text-inverted mb-1 text-xl font-bold tracking-wide">
                         {form.name}
                       </h1>
                       {form.description ? (
-                        <p className="min-h-10 text-sm text-gray-500 ltr:mr-4 rtl:ml-4 dark:text-white">
+                        <p className="min-h-10 text-subtle dark:text-inverted text-sm ltr:mr-4 rtl:ml-4">
                           {form.description}
                         </p>
                       ) : null}
@@ -136,8 +136,8 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe
         ) : (
           <div className="mx-auto my-0 max-w-3xl md:my-24">
             <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
-              <div className="main dark:bg-darkgray-100 sm:dark:border-darkgray-300 -mx-4 rounded-md border border-neutral-200 bg-white p-4 py-6 sm:mx-0 sm:px-8">
-                <div className="dark:text-white">{customPageMessage}</div>
+              <div className="main dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-default -mx-4 rounded-md border border-neutral-200 p-4 py-6 sm:mx-0 sm:px-8">
+                <div className="dark:text-inverted">{customPageMessage}</div>
               </div>
             </div>
           </div>
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index bcf47c3ef5..e560fd3d3b 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -35,8 +35,8 @@ export default function SendgridSetup() {
   }, [testPassed]);
 
   return (
-    <div className="flex h-screen bg-gray-200">
-      <div className="m-auto rounded bg-white p-5 md:w-[520px] md:p-10">
+    <div className="bg-emphasis flex h-screen">
+      <div className="bg-default m-auto rounded p-5 md:w-[520px] md:p-10">
         <div className="flex flex-col space-y-5 md:flex-row md:space-y-0 md:space-x-5">
           <div>
             <img src="/api/app-store/sendgrid/logo.png" alt="Sendgrid" className="h-12 w-12 max-w-2xl" />
@@ -106,8 +106,8 @@ export default function SendgridSetup() {
                     className={
                       testPassed !== undefined
                         ? testPassed
-                          ? " !bg-green-100 !text-green-700 hover:bg-green-100"
-                          : "!border-red-700 bg-red-100 !text-red-700 hover:bg-red-100"
+                          ? " !bg-success hover:bg-success !text-green-700"
+                          : "bg-error hover:bg-error !border-red-700 !text-red-700"
                         : "secondary"
                     }
                     color={testPassed === true ? "minimal" : "secondary"}
diff --git a/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx b/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx
index 98e713b0ee..58ec0142bc 100644
--- a/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/stripepayment/components/EventTypeAppCardInterface.tsx
@@ -62,7 +62,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
                 min="0.5"
                 type="number"
                 required
-                className="block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm"
+                className="border-default block w-full rounded-sm pl-2 pr-12 text-sm"
                 placeholder="Price"
                 onChange={(e) => {
                   setAppData("price", Number(e.target.value) * 100);
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 25a4f01e20..1a118e2d43 100644
--- a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+++ b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
@@ -7,8 +7,8 @@ import { FiExternalLink } from "@calcom/ui/components/icon";
 export default function HowToUse() {
   const { t } = useLocale();
   return (
-    <div className="flex h-screen bg-gray-200">
-      <div className="m-auto rounded bg-white p-10">
+    <div className="bg-emphasis flex h-screen">
+      <div className="bg-default m-auto rounded p-10">
         <div className="flex flex-row">
           <div className="mr-5">
             <img className="w-11" src="/api/app-store/typeform/icon.svg" alt="Zapier Logo" />
@@ -18,7 +18,7 @@ export default function HowToUse() {
             <ol className="mt-5 mb-5 ml-5 list-decimal ltr:mr-5 rtl:ml-5">
               <li>
                 Make sure that you have{" "}
-                <Link href="/apps/routing-forms" className="text-base text-gray-500">
+                <Link href="/apps/routing-forms" className="text-subtle text-base">
                   Routing Forms
                 </Link>{" "}
                 app installed
@@ -30,8 +30,8 @@ export default function HowToUse() {
                 <Link
                   href="/api/app-store/typeform/copy-typeform-redirect-url.png"
                   target="_blank"
-                  className="inline-flex items-baseline text-base text-gray-500">
-                  <FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  className="text-subtle inline-flex items-baseline text-base">
+                  <FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
                   Click &quot;Copy Typeform Redirect URL&quot;
                 </Link>
               </li>
@@ -41,8 +41,8 @@ export default function HowToUse() {
                 <Link
                   href="https://www.typeform.com/help/a/end-screens-and-redirects-360051791392/#h_01G0CFXF21W2EQ8PXKSB4KSC8P"
                   target="_blank"
-                  className="inline-flex items-baseline text-base text-gray-500">
-                  <FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  className="text-subtle inline-flex items-baseline text-base">
+                  <FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
                   Redirect to your typeform
                 </Link>
               </li>
@@ -51,8 +51,8 @@ export default function HowToUse() {
                 <Link
                   href="https://www.typeform.com/help/a/use-recall-information-to-reference-typeform-answers-variables-and-more-360052320011/"
                   target="_blank"
-                  className="inline-flex items-baseline text-base text-gray-500">
-                  <FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  className="text-subtle inline-flex items-baseline text-base">
+                  <FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
                   Recall Information in Typeform
                 </Link>{" "}
                 to add values to query params.
diff --git a/packages/app-store/vital/components/AppConfiguration.tsx b/packages/app-store/vital/components/AppConfiguration.tsx
index e266616393..19a73b85fd 100644
--- a/packages/app-store/vital/components/AppConfiguration.tsx
+++ b/packages/app-store/vital/components/AppConfiguration.tsx
@@ -138,7 +138,7 @@ const AppConfiguration = (props: IAppConfigurationProps) => {
               setSleepValue(Number(e.currentTarget.value));
               setTouchedForm(true);
             }}
-            className="pr-12shadow-sm mt-1 block w-full rounded-sm border border-gray-300 py-2 pl-6 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+            className="pr-12shadow-sm border-default mt-1 block w-full rounded-sm border py-2 pl-6 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
           />
           <p className="ml-2">
             <strong>{t("vital_app_hours", { ns: "vital" })}</strong>
diff --git a/packages/app-store/wipemycalother/components/confirmDialog.tsx b/packages/app-store/wipemycalother/components/confirmDialog.tsx
index 98c40d8202..2c62aff2da 100644
--- a/packages/app-store/wipemycalother/components/confirmDialog.tsx
+++ b/packages/app-store/wipemycalother/components/confirmDialog.tsx
@@ -86,9 +86,9 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
           </div>
           <div className="pt-1">
             <DialogHeader title="Wipe My Calendar" />
-            <p className="mt-2 text-sm text-gray-500">
+            <p className="text-subtle mt-2 text-sm">
               This will cancel all upcoming meetings from: <br />{" "}
-              <strong className="text-black">
+              <strong className="text-emphasis">
                 {initialDate.format(dateFormat)} - {endDate.format(dateFormat)}
               </strong>
             </p>
diff --git a/packages/app-store/zapier/components/TemplateCard.tsx b/packages/app-store/zapier/components/TemplateCard.tsx
index f860c3bffd..36917196af 100644
--- a/packages/app-store/zapier/components/TemplateCard.tsx
+++ b/packages/app-store/zapier/components/TemplateCard.tsx
@@ -4,7 +4,7 @@ import type { Template } from "./AppSettingsInterface";
 
 export default function TemplateCard({ template }: { template: Template }) {
   return (
-    <div className="min-h-16 sticky flex flex-col justify-between gap-4 rounded-md border border-gray-200 bg-white p-5">
+    <div className="min-h-16 bg-default sticky flex flex-col justify-between gap-4 rounded-md border border-gray-200 p-5">
       <div className="flex items-start justify-start">
         <div>
           <div className="mr-4 flex h-12 w-12 items-center justify-center rounded-md p-1">
@@ -13,8 +13,8 @@ export default function TemplateCard({ template }: { template: Template }) {
         </div>
         <div className="mr-4">
           <div>
-            <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>
+            <p className="text-emphasis truncate text-sm font-medium leading-4">{template.app}</p>
+            <p className="text-subtle mt-[2px] text-sm">{template.text}</p>
           </div>
         </div>
       </div>
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index 13086d3ccc..2f81fd83c1 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -41,13 +41,13 @@ export default function ZapierSetup(props: IZapierSetupProps) {
   }
 
   if (integrations.isLoading) {
-    return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
+    return <div className="absolute z-50 flex h-screen w-full items-center bg-emphasis" />;
   }
 
   return (
-    <div className="flex h-screen bg-gray-200">
+    <div className="flex h-screen bg-emphasis">
       {showContent ? (
-        <div className="m-auto max-w-[43em] overflow-auto rounded bg-white pb-10 md:p-10">
+        <div className="m-auto max-w-[43em] overflow-auto rounded bg-default pb-10 md:p-10">
           <div className="md:flex md:flex-row">
             <div className="invisible md:visible">
               <img className="h-11" src="/api/app-store/zapier/icon.svg" alt="Zapier Logo" />
@@ -65,7 +65,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                 <>
                   <div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
                   <div className="my-2 mt-3 flex-wrap sm:flex sm:flex-nowrap">
-                    <code className="h-full w-full whitespace-pre-wrap rounded-md bg-gray-100 py-[6px] pl-2 pr-2 sm:rounded-r-none sm:pr-5">
+                    <code className="h-full w-full whitespace-pre-wrap rounded-md bg-subtle py-[6px] pl-2 pr-2 sm:rounded-r-none sm:pr-5">
                       {newApiKey}
                     </code>
                     <Tooltip side="top" content={t("copy_to_clipboard")}>
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 41545a0fe9..bd2fe53873 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -15,32 +15,19 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        /* your primary brand color */
-        brandcontrast: "var(--brand-text-color)",
-        darkmodebrand: "var(--brand-color-dark-mode)",
-        darkmodebrandcontrast: "var(--brand-text-color-dark-mode)",
-        bookinglightest: "var(--booking-lightest-color)",
-        bookinglighter: "var(--booking-lighter-color)",
-        bookinglight: "var(--booking-light-color)",
-        bookingmedian: "var(--booking-median-color)",
-        bookingdark: "var(--booking-dark-color)",
-        bookingdarker: "var(--booking-darker-color)",
-        bookinghighlight: "var(--booking-highlight-color)",
+        emphasis: "var(--cal-bg-emphasis, #E5E7EB)",
+        default: "var(--cal-bg, white)",
+        subtle: "var(--cal-bg-subtle, #F3F4F6)",
+        muted: "var(--cal-bg-muted, #F9FAFB)",
+        inverted: "var(--cal-bg-inverted, #111827)",
+        info: "var(--cal-bg-info, #DEE9FC)",
+        success: "var(--cal-bg-success, #E2FBE8)",
+        attention: "var(--cal-bg-attention, #FCEED8)",
+        error: "var(--cal-bg-error, #F9E3E2)",
         black: "#111111",
         brand: {
-          // Figure out a way to automate this for self hosted users
-          // Goto https://javisperez.github.io/tailwindcolorshades to generate your brand color
-          50: "#d1d5db",
-          100: "#9ca3af",
-          200: "#6b7280",
-          300: "#4b5563",
-          400: "#374151",
-          500: "#111827", // Brand color
-          600: "#0f1623",
-          700: "#0d121d",
-          800: "#0a0e17",
-          900: "#080c13",
-          DEFAULT: "var(--brand-color)",
+          default: "var(--cal-brand, #111827)",
+          emphasis: "var(--cal-brand-emphasis, #101010)",
         },
         gray: {
           50: "#F9FAFB",
@@ -54,79 +41,6 @@ module.exports = {
           800: "#1F2937",
           900: "#111827",
         },
-
-        primary: {
-          50: "#F4F4F4",
-          100: "#E8E8E8",
-          200: "#C6C6C6",
-          300: "#A3A3A3",
-          400: "#5F5F5F",
-          500: "#1A1A1A",
-          600: "#171717",
-          700: "#141414",
-          800: "#101010",
-          900: "#0D0D0D",
-        },
-        secondary: {
-          50: "#F5F8F7",
-          100: "#EBF0F0",
-          200: "#CDDAD9",
-          300: "#AEC4C2",
-          400: "#729894",
-          500: "#356C66",
-          600: "#30615C",
-          700: "#28514D",
-          800: "#20413D",
-          900: "#223B41",
-        },
-        red: {
-          50: "#FFF5F5",
-          100: "#FFE3E2",
-          200: "#FFC9C9",
-          300: "#FEA8A8",
-          400: "#FF8787",
-          500: "#FF6B6B",
-          600: "#FA5352",
-          700: "#F03E3F",
-          800: "#E03130",
-          900: "#C92B2B",
-        },
-        orange: {
-          50: "#FFF4E5",
-          100: "#FFE8CC",
-          200: "#FFD8A8",
-          300: "#FFBF78",
-          400: "#FFA94E",
-          500: "#FF922B",
-          600: "#FD7E14",
-          700: "#F76706",
-          800: "#E8580C",
-          900: "#D94810",
-        },
-        green: {
-          50: "#EBFCEE",
-          100: "#D2F9D9",
-          200: "#B1F2BA",
-          300: "#8CE99A",
-          400: "#69DB7C",
-          500: "#51CF66",
-          600: "#40C057",
-          700: "#36B24D",
-          800: "#2F9E44",
-          900: "#2B8A3E",
-        },
-        blue: {
-          50: "#E7F5FF",
-          100: "#D0EBFF",
-          200: "#A4D8FF",
-          300: "#74C0FC",
-          400: "#4DABF7",
-          500: "#339AF0",
-          600: "#238BE6",
-          700: "#1C7ED7",
-          800: "#1971C2",
-          900: "#1763AB",
-        },
         darkgray: {
           50: "#101010",
           100: "#1c1c1c",
@@ -140,6 +54,23 @@ module.exports = {
           900: "#f3f4f6",
         },
       },
+      borderColor: {
+        emphasis: "var(--cal-border-emphasis, #9CA3AF)",
+        default: "var(--cal-border, #D1D5DB)",
+        subtle: "var(--cal-border-subtle, #E5E7EB)",
+        muted: "var(--cal-border-muted, #F3F4F6)",
+      },
+      textColor: {
+        emphasis: "var(--cal-text-emphasis, #111827)",
+        default: "var(--cal-text, #374151)",
+        subtle: "var(--cal-text-subtle, #6B7280)",
+        muted: "var(--cal-text-muted, #9CA3AF)",
+        inverted: "var(--cal-text-inverted, white)",
+        info: "var(--cal-text-info, #253985)",
+        success: "var(--cal-text-success, #285231)",
+        attention: "var(--cal-text-attention, #73321B)",
+        error: "var(--cal-text-error, #752522)",
+      },
       screens: {
         pwa: { raw: "(display-mode: standalone)" },
       },
diff --git a/packages/config/theme/colors.css b/packages/config/theme/colors.css
new file mode 100644
index 0000000000..57d065f940
--- /dev/null
+++ b/packages/config/theme/colors.css
@@ -0,0 +1,86 @@
+
+::root {
+  /* background */
+
+  --cal-bg-emphasis: #E5E7EB;
+  --cal-bg: white;
+  --cal-bg-subtle: #F3F4F6;
+  --cal-bg-muted: #F9FAFB;
+  --cal-bg-inverted: #111827;
+
+  /* background -> components*/
+  --cal-bg-info: #DEE9FC;
+  --cal-bg-success: #E2FBE8;
+  --cal-bg-attention: #FCEED8;
+  --cal-bg-error: #F9E3E2;
+
+
+  /* Borders */
+  --cal-border-emphasis:#9CA3AF;
+  --cal-border: #D1D5DB:
+  --cal-border-subtle:#E5E7EB;
+  --cal-border-muted:#F3F4F6;
+
+  /* Content/Text */
+  --cal-text-emphasis: #111827;
+  --cal-text:#374151;
+  --cal-text-subtle:#6B7280;
+  --cal-text-muted:#9CA3AF;
+  --cal-text-inverted:white;
+
+  /* Content/Text -> components */
+  --cal-text-info:#253985;
+  --cal-text-success:#285231;
+  --cal-text-attention:#73321B;
+  --cal-text-error:#752522;
+
+  /* Brand shinanigans
+    -> These will be computed for the users theme at runtime.
+  */
+  --cal-brand:#111827;
+  --cal-brand-emphasis:#101010;
+}
+
+/* Darkmode Colors  -- TODO: WIP*/
+.dark {
+  /* background */
+
+  --cal-bg-emphasis: #E5E7EB;
+  --cal-bg: white;
+  --cal-bg-subtle: #F3F4F6;
+  --cal-bg-muted: #F9FAFB;
+  --cal-bg-inverted: #111827;
+
+  /* background -> components*/
+  --cal-bg-info: #DEE9FC;
+  --cal-bg-success: #E2FBE8;
+  --cal-bg-attention: #FCEED8;
+  --cal-bg-error: #F9E3E2;
+
+
+  /* Borders */
+  --cal-border-emphasis:#9CA3AF;
+  --cal-border: #D1D5DB:
+  --cal-border-subtle:#E5E7EB;
+  --cal-border-muted:#F3F4F6;
+
+  /* Content/Text */
+  --cal-text-emphasis: #111827;
+  --cal-text:#374151;
+  --cal-text-subtle:#6B7280;
+  --cal-text-muted:#9CA3AF;
+  --cal-text-inverted:white;
+
+  /* Content/Text -> components */
+  --cal-text-info:#253985;
+  --cal-text-success:#285231;
+  --cal-text-attention:#73321B;
+  --cal-text-error:#752522;
+
+  /* Brand shinanigans
+    -> These will be computed for the users theme at runtime.
+  */
+  --cal-brand:#111827;
+  --cal-brand-emphasis:#101010;
+}
+
diff --git a/packages/config/theme/generateColor.ts b/packages/config/theme/generateColor.ts
new file mode 100644
index 0000000000..59c1b8ecbc
--- /dev/null
+++ b/packages/config/theme/generateColor.ts
@@ -0,0 +1,85 @@
+import type { Color, HSL, Shade } from "./interfaces";
+
+// Yeah i stole this...
+const hexToHSL = (hex: string): HSL => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) || [];
+  try {
+    let r = parseInt(result[1], 16);
+    let g = parseInt(result[2], 16);
+    let b = parseInt(result[3], 16);
+    (r /= 255), (g /= 255), (b /= 255);
+    const max = Math.max(r, g, b),
+      min = Math.min(r, g, b);
+    let h = 0,
+      s,
+      // eslint-disable-next-line prefer-const
+      l = (max + min) / 2;
+    if (max == min) {
+      h = s = 0; // achromatic
+    } else {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+      h /= 6;
+    }
+    const HSL: HSL = { h: 0, s: 0, l: 0 };
+    HSL.h = Math.round(h * 360);
+    HSL.s = Math.round(s * 100);
+    HSL.l = Math.round(l * 100);
+    return HSL;
+  } catch (error) {
+    console.log(hex);
+    return { h: 0, s: 0, l: 0 };
+  }
+};
+
+const hslToHex = ({ h, s, l }: HSL): string => {
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, "0"); // convert to Hex and prefix "0" if needed
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+
+const HSL_SHADES: Shade[] = [
+  { name: "50", lightness: 98 },
+  { name: "100", lightness: 95 },
+  { name: "200", lightness: 90 },
+  { name: "300", lightness: 82 },
+  { name: "400", lightness: 64 },
+  { name: "500", lightness: 46 },
+  { name: "600", lightness: 33 },
+  { name: "700", lightness: 24 },
+  { name: "800", lightness: 14 },
+  { name: "900", lightness: 7 },
+];
+
+const generateColor = ({ hex }: { hex: string }): Color => {
+  const colorHSL = hexToHSL(hex);
+  const obj: Color = {};
+  HSL_SHADES.forEach(({ name, lightness }: Shade) => {
+    const { h, s } = colorHSL;
+    const hsl: HSL = { h, s, l: lightness };
+    const hex = hslToHex(hsl);
+    obj[name] = hex;
+  });
+
+  return obj;
+};
+
+export { generateColor };
diff --git a/packages/config/theme/interfaces.ts b/packages/config/theme/interfaces.ts
new file mode 100644
index 0000000000..d479d81d99
--- /dev/null
+++ b/packages/config/theme/interfaces.ts
@@ -0,0 +1,17 @@
+interface Color {
+  [key: string]: string;
+}
+interface HSL {
+  h: number;
+  s: number;
+  l: number;
+}
+interface Palette {
+  [key: string]: Color;
+}
+interface Shade {
+  name: string;
+  lightness: number;
+}
+
+export type { Color, HSL, Palette, Shade };
diff --git a/packages/embeds/embed-core/src/Inline/inlineHtml.ts b/packages/embeds/embed-core/src/Inline/inlineHtml.ts
index a082140285..715858a262 100644
--- a/packages/embeds/embed-core/src/Inline/inlineHtml.ts
+++ b/packages/embeds/embed-core/src/Inline/inlineHtml.ts
@@ -1,5 +1,5 @@
 const html = `<div id="wrapper" style="top:50%; left:50%;transform:translate(-50%,-50%)" class="absolute z-highest">
-<div class="loader border-brand dark:border-darkmodebrand">
+<div class="loader border-brand-default dark:border-darkmodebrand">
 	<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
 </div>
 <div id="error" style="transform:translate(-50%,-50%)" class="hidden">
diff --git a/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts b/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
index c0985c9731..cf02786d86 100644
--- a/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
+++ b/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
@@ -46,11 +46,11 @@ const html = `<style>
 <div class="modal-box">
   <div class="body">
     <div id="wrapper" class="z-[999999999999] absolute flex w-full items-center">
-      <div class="loader modal-loader border-brand dark:border-darkmodebrand">
+      <div class="loader modal-loader border-brand-default dark:border-darkmodebrand">
         <span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
       </div>
       </div>
-    <div id="error" class="hidden left-1/2 -translate-x-1/2 relative text-white"></div>
+    <div id="error" class="hidden left-1/2 -translate-x-1/2 relative text-inverted"></div>
     <slot></slot>
   </div>
 </div>
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index d0b2eeb63c..5dd4b8252f 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -152,7 +152,7 @@ const AdminAppsList = ({
     <form
       {...rest}
       className={
-        classNames?.form ?? "max-w-80 mb-4 rounded-md bg-white px-0 pt-0 md:max-w-full md:px-8 md:pt-10"
+        classNames?.form ?? "max-w-80 mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full md:px-8 md:pt-10"
       }
       onSubmit={(e) => {
         e.preventDefault();
diff --git a/packages/features/bookings/components/EventTypeFilter.tsx b/packages/features/bookings/components/EventTypeFilter.tsx
index 741abf757b..371101ad28 100644
--- a/packages/features/bookings/components/EventTypeFilter.tsx
+++ b/packages/features/bookings/components/EventTypeFilter.tsx
@@ -50,13 +50,13 @@ export const EventTypeFilter = () => {
         {groupedEventTypes &&
           Object.keys(groupedEventTypes).map((teamName) => (
             <Fragment key={teamName}>
-              <div className="p-4 text-xs font-medium uppercase leading-none text-gray-500">
+              <div className="text-subtle p-4 text-xs font-medium uppercase leading-none">
                 {teamName === "user_own_event_types" ? t("individual") : teamName}
               </div>
               {groupedEventTypes[teamName].map((eventType) => (
                 <Fragment key={eventType.id}>
                   <div className="item-center flex px-4 py-[6px]">
-                    <p className="block self-center truncate text-sm font-medium text-gray-700">
+                    <p className="text-default block self-center truncate text-sm font-medium">
                       {eventType.title}
                     </p>
                     <div className="ml-auto">
@@ -64,7 +64,7 @@ export const EventTypeFilter = () => {
                         type="checkbox"
                         name=""
                         id=""
-                        className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2 "
+                        className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2 "
                       />
                     </div>
                   </div>
diff --git a/packages/features/bookings/components/PeopleFilter.tsx b/packages/features/bookings/components/PeopleFilter.tsx
index d63e332a88..e54317bcf3 100644
--- a/packages/features/bookings/components/PeopleFilter.tsx
+++ b/packages/features/bookings/components/PeopleFilter.tsx
@@ -20,11 +20,11 @@ export const PeopleFilter = () => {
 
   return (
     <AnimatedPopover text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : dropdownTitle}>
-      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
+      <div className="item-center flex px-4 py-[6px] focus-within:bg-subtle hover:cursor-pointer hover:bg-muted">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
           <FiUser className="h-5 w-5" />
         </div>
-        <label htmlFor="allUsers" className="mr-auto self-center truncate text-sm font-medium text-gray-700">
+        <label htmlFor="allUsers" className="mr-auto self-center truncate text-sm font-medium text-default">
           {t("all_users_filter_label")}
         </label>
 
@@ -37,13 +37,13 @@ export const PeopleFilter = () => {
             // Always clear userIds on toggle as this is the toggle box for all users. No params means we are currently selecting all users
             removeByKey("userIds");
           }}
-          className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+          className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-default "
         />
       </div>
       {data &&
         data.map((user) => (
           <div
-            className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50"
+            className="item-center flex px-4 py-[6px] focus-within:bg-subtle focus-within:bg-subtle hover:cursor-pointer hover:bg-muted
             key={`${user.id}`}>
             <Avatar
               imageSrc={user.avatar}
@@ -55,7 +55,7 @@ export const PeopleFilter = () => {
             />
             <label
               htmlFor={user.name ?? "NamelessUser"}
-              className="ml-2 mr-auto self-center truncate text-sm font-medium text-gray-700 hover:cursor-pointer">
+              className="ml-2 mr-auto self-center truncate text-sm font-medium text-default hover:cursor-pointer">
               {user.name}
             </label>
 
@@ -72,7 +72,7 @@ export const PeopleFilter = () => {
                   removeItemByKeyAndValue("userIds", user.id);
                 }
               }}
-              className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+              className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-default "
             />
           </div>
         ))}
diff --git a/packages/features/bookings/components/TeamFilter.tsx b/packages/features/bookings/components/TeamFilter.tsx
index 199d12afcf..41dffa52c5 100644
--- a/packages/features/bookings/components/TeamFilter.tsx
+++ b/packages/features/bookings/components/TeamFilter.tsx
@@ -22,13 +22,13 @@ export const TeamsMemberFilter = () => {
 
   return (
     <AnimatedPopover text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : dropdownTitle}>
-      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
+      <div className="item-center flex px-4 py-[6px] focus-within:bg-subtle hover:cursor-pointer hover:bg-muted">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
           <FiLayers className="h-5 w-5" />
         </div>
         <label
           htmlFor="allBookings"
-          className="mr-auto self-center truncate text-sm font-medium text-gray-700">
+          className="mr-auto self-center truncate text-sm font-medium text-default">
           {t("all_bookings_filter_label")}
         </label>
 
@@ -40,16 +40,16 @@ export const TeamsMemberFilter = () => {
             setDropdownTitle(t("all_bookings_filter_label"));
             removeByKey("teamIds"); // Always clear on toggle  or not toggle (seems weird but when you know the behviour it works well )
           }}
-          className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+          className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-default "
         />
       </div>
-      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
+      <div className="item-center flex px-4 py-[6px] focus-within:bg-subtle hover:cursor-pointer hover:bg-muted
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
           <FiUser className="h-5 w-5" />
         </div>
         <label
           htmlFor="yourBookings"
-          className="mr-auto self-center truncate text-sm font-medium text-gray-700">
+          className="mr-auto self-center truncate text-sm font-medium text-default">
           {t("your_bookings_filter_label")}
         </label>
 
@@ -66,13 +66,13 @@ export const TeamsMemberFilter = () => {
               removeItemByKeyAndValue("userIds", session.data?.user.id || 0);
             }
           }}
-          className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+          className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-default "
         />
       </div>
       {data &&
         data.map((team) => (
           <div
-            className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50"
+            className="item-center flex px-4 py-[6px] focus-within:bg-subtle hover:cursor-pointer hover:bg-muted
             key={`${team.id}`}>
             <Avatar
               imageSrc={team.logo}
@@ -84,7 +84,7 @@ export const TeamsMemberFilter = () => {
             />
             <label
               htmlFor={team.name}
-              className="ml-2 mr-auto select-none self-center truncate text-sm font-medium text-gray-700 hover:cursor-pointer">
+              className="ml-2 mr-auto select-none self-center truncate text-sm font-medium text-default hover:cursor-pointer">
               {team.name}
             </label>
 
@@ -101,7 +101,7 @@ export const TeamsMemberFilter = () => {
                   removeItemByKeyAndValue("teamIds", team.id);
                 }
               }}
-              className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+              className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-default "
             />
           </div>
         ))}
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 28563fc3a5..d75e85eb29 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -55,7 +55,7 @@ export const Day = ({
         active
           ? "dark:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkmodebrandcontrast bg-brand text-brandcontrast border-2"
           : !disabled
-          ? "dark:bg-darkgray-200 hover:border-brand dark:hover:border-darkmodebrand bg-gray-100 dark:text-white"
+          ? "dark:bg-darkgray-200 hover:border-brand-default dark:hover:border-darkmodebrand bg-subtle dark:text-inverted"
           : ""
       )}
       data-testid="day"
@@ -80,8 +80,8 @@ const NoAvailabilityOverlay = ({
   const { t } = useLocale();
 
   return (
-    <div className="dark:border-darkgray-300 dark:bg-darkgray-200 absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border border-gray-200 bg-gray-50 p-8 shadow-sm">
-      <h4 className="mb-4 font-medium text-gray-900 dark:text-white">
+    <div className="dark:border-darkgray-300 dark:bg-darkgray-200 bg-muted absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border border-gray-200 p-8 shadow-sm">
+      <h4 className="text-emphasis dark:text-inverted mb-4 font-medium">
         {t("no_availability_in_month", { month: month })}
       </h4>
       <Button onClick={nextMonthButton} color="primary" EndIcon={FiArrowRight}>
@@ -146,7 +146,7 @@ const Days = ({
             <div key={`e-${idx}`} />
           ) : props.isLoading ? (
             <button
-              className="dark:bg-darkgray-200 absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent bg-gray-50 text-center text-gray-400 opacity-50 dark:text-gray-400"
+              className="dark:bg-darkgray-200 bg-mutedext-center text-muted dark:text-muted absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent opacity-50"
               key={`e-${idx}`}
               disabled>
               <SkeletonText className="h-4 w-5" />
@@ -199,17 +199,19 @@ const DatePicker = ({
   return (
     <div className={className}>
       <div className="mb-4 flex justify-between text-xl font-light">
-        <span className="w-1/2 dark:text-white">
+        <span className="dark:text-inverted w-1/2">
           {browsingDate ? (
             <>
-              <strong className="text-bookingdarker text-base font-semibold dark:text-white">{month}</strong>{" "}
+              <strong className="text-bookingdarker dark:text-inverted text-base font-semibold">
+                {month}
+              </strong>{" "}
               <span className="text-bookinglight text-sm font-medium">{browsingDate.format("YYYY")}</span>
             </>
           ) : (
             <SkeletonText className="h-8 w-24" />
           )}
         </span>
-        <div className="text-black dark:text-white">
+        <div className="dark:text-inverted text-emphasis">
           <button
             type="button"
             onClick={() => changeMonth(-1)}
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index 550655b42b..964008c0be 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -28,7 +28,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-gray-500">{subtitle}</p>
+      <p>{label}</p> <p className=" text-subtle">{subtitle}</p>
     </components.SingleValue>
   );
 };
@@ -161,7 +161,7 @@ const DestinationCalendarSelector = ({
         }}
         isSearchable={false}
         className={classNames(
-          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm"
+          "border-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm"
         )}
         onChange={(newValue) => {
           setSelectedOption(newValue);
diff --git a/packages/features/calendars/weeklyview/components/Calendar.tsx b/packages/features/calendars/weeklyview/components/Calendar.tsx
index 22fe626942..029892b312 100644
--- a/packages/features/calendars/weeklyview/components/Calendar.tsx
+++ b/packages/features/calendars/weeklyview/components/Calendar.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useRef } from "react";
 
 import { useCalendarStore } from "../state/store";
 import "../styles/styles.css";
-import { CalendarComponentProps } from "../types/state";
+import type { CalendarComponentProps } from "../types/state";
 import { getDaysBetweenDates, getHoursToDisplay } from "../utils";
 import { DateValues } from "./DateValues";
 import { BlockedList } from "./blocking/BlockedList";
@@ -44,7 +44,7 @@ export function Calendar(props: CalendarComponentProps) {
           { "--one-minute-height": `calc(1.75rem/(60/${usersCellsStopsPerHour}))` } as React.CSSProperties // This can't live in the css file because it's a dynamic value and css variable gets super
         }>
         <SchedulerHeading />
-        <div ref={container} className="relative isolate flex flex-auto  flex-col bg-white">
+        <div ref={container} className="bg-default relative isolate flex  flex-auto flex-col">
           <div
             style={{ width: "165%" }}
             className="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
@@ -56,7 +56,7 @@ export function Calendar(props: CalendarComponentProps) {
             containerRef={container}
           /> */}
             <div className="flex flex-auto">
-              <div className="sticky left-0 z-10 w-14 flex-none bg-white ring-1 ring-gray-100" />
+              <div className="bg-default sticky left-0 z-10 w-14 flex-none ring-1 ring-gray-100" />
               <div className="grid flex-auto grid-cols-1 grid-rows-1 ">
                 <HorizontalLines
                   hours={hours}
@@ -125,7 +125,7 @@ const MobileNotSupported = ({ children }: { children: React.ReactNode }) => {
     <>
       <div className="flex h-full flex-col items-center justify-center sm:hidden">
         <h1 className="text-2xl font-bold">Mobile not supported yet </h1>
-        <p className="text-gray-500">Please use a desktop browser to view this page</p>
+        <p className="text-subtle">Please use a desktop browser to view this page</p>
       </div>
       <div className="hidden sm:block">{children}</div>
     </>
diff --git a/packages/features/calendars/weeklyview/components/DateValues/index.tsx b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
index 4c7e5b0990..c2086d7d41 100644
--- a/packages/features/calendars/weeklyview/components/DateValues/index.tsx
+++ b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
@@ -12,8 +12,8 @@ export function DateValues({ days, containerNavRef }: Props) {
   return (
     <div
       ref={containerNavRef}
-      className="sticky top-0 z-30 flex-none border-b border-b-gray-300 bg-white sm:pr-8">
-      <div className="flex text-sm leading-6 text-gray-500 sm:hidden" data-dayslength={days.length}>
+      className="bg-default sticky top-0 z-30 flex-none border-b border-b-gray-300 sm:pr-8">
+      <div className="text-subtle flex text-sm leading-6 sm:hidden" data-dayslength={days.length}>
         {days.map((day) => {
           const isToday = dayjs().isSame(day, "day");
           return (
@@ -24,8 +24,8 @@ export function DateValues({ days, containerNavRef }: Props) {
               {day.format("dd")}{" "}
               <span
                 className={classNames(
-                  "mt-1 flex h-8 w-8 items-center justify-center font-semibold text-gray-900",
-                  isToday && "rounded-full bg-gray-900 text-white"
+                  "text-emphasis mt-1 flex h-8 w-8 items-center justify-center font-semibold",
+                  isToday && "bg-inverted text-inverted rounded-full"
                 )}>
                 {day.format("D")}
               </span>
@@ -33,7 +33,7 @@ export function DateValues({ days, containerNavRef }: Props) {
           );
         })}
       </div>
-      <div className="-mr-px hidden auto-cols-fr  text-sm leading-6 text-gray-500 sm:flex ">
+      <div className="text-subtle -mr-px hidden  auto-cols-fr text-sm leading-6 sm:flex ">
         <div className="col-end-1 w-14" />
         {days.map((day) => {
           const isToday = dayjs().isSame(day, "day");
@@ -46,7 +46,7 @@ export function DateValues({ days, containerNavRef }: Props) {
                 <span
                   className={classNames(
                     "items-center justify-center p-1",
-                    isToday && "rounded-full bg-gray-900 text-white"
+                    isToday && "bg-inverted text-inverted rounded-full"
                   )}>
                   {day.format("DD")}
                 </span>
diff --git a/packages/features/calendars/weeklyview/components/event/Empty.tsx b/packages/features/calendars/weeklyview/components/event/Empty.tsx
index bc101293da..cd3e1713ad 100644
--- a/packages/features/calendars/weeklyview/components/event/Empty.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Empty.tsx
@@ -1,7 +1,8 @@
 import shallow from "zustand/shallow";
 
 import { useCalendarStore } from "../../state/store";
-import { gridCellToDateTime, GridCellToDateProps } from "../../utils";
+import type { GridCellToDateProps } from "../../utils";
+import { gridCellToDateTime } from "../../utils";
 
 export function EmptyCell(props: GridCellToDateProps) {
   const { onEmptyCellClick, hoverEventDuration } = useCalendarStore(
@@ -27,9 +28,9 @@ export function EmptyCell(props: GridCellToDateProps) {
       onClick={() => onEmptyCellClick && onEmptyCellClick(cellToDate.toDate())}>
       {hoverEventDuration !== 0 && (
         <div
-          className="opacity-4 absolute inset-x-1  hidden rounded-[4px] border-[1px] border-gray-900  bg-gray-100
-          py-1
-          px-[6px] text-xs font-semibold leading-5 text-gray-900 hover:bg-gray-200 group-hover:block group-hover:cursor-pointer"
+          className="opacity-4 bg-subtle hover:bg-emphasis  text-emphasis absolute inset-x-1 hidden  rounded-[4px]
+          border-[1px]
+          border-gray-900 py-1 px-[6px] text-xs font-semibold leading-5 group-hover:block group-hover:cursor-pointer"
           style={{
             height: `calc(${hoverEventDuration}*var(--one-minute-height))`,
             zIndex: 49,
diff --git a/packages/features/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx
index b4f3f22cea..0205a57293 100644
--- a/packages/features/calendars/weeklyview/components/event/Event.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Event.tsx
@@ -1,7 +1,7 @@
 import dayjs from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";
 
-import { CalendarEvent } from "../../types/events";
+import type { CalendarEvent } from "../../types/events";
 
 type EventProps = {
   event: CalendarEvent;
@@ -29,18 +29,18 @@ export function Event({
         "group  flex h-full w-full flex-col overflow-y-auto rounded-[4px]  py-1 px-[6px] text-xs font-semibold  leading-5 ",
         event.status === "ACCEPTED" &&
           !selected &&
-          "border-[1px] border-gray-900 bg-gray-100 text-gray-900 hover:bg-gray-200",
+          "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-gray-900",
         event.status === "PENDING" &&
           !selected &&
-          "border-[1px] border-dashed border-gray-900 bg-white text-gray-900",
-        selected && "border-[1px] border-transparent bg-gray-900 text-white",
+          "bg-default text-emphasis border-[1px] border-dashed border-gray-900",
+        selected && "bg-inverted text-inverted border-[1px] border-transparent",
         disabled ? "hover:cursor-default" : "hover:cursor-pointer"
       )}>
       <div className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-left leading-4">
         {event.title}
       </div>
       {eventDuration >= 30 && (
-        <p className="text-left text-[10px] leading-none text-gray-500">
+        <p className="text-subtle text-left text-[10px] leading-none">
           {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
         </p>
       )}
diff --git a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
index e712c22fad..a61ab5c7ec 100644
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -13,9 +13,9 @@ export function SchedulerHeading() {
 
   return (
     <header className="flex flex-none flex-col justify-between py-4 sm:flex-row sm:items-center">
-      <h1 className="text-xl font-semibold text-gray-900">
+      <h1 className="text-emphasis text-xl font-semibold">
         {startDate.format("MMM DD")}-{endDate.format("DD")}
-        <span className="text-gray-500">,{startDate.format("YYYY")}</span>
+        <span className="text-subtle">,{startDate.format("YYYY")}</span>
       </h1>
       <div className="flex items-center space-x-2 rtl:space-x-reverse">
         {/* TODO: Renable when we have daily/mobile support */}
diff --git a/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
index 5c4dfc5a80..b4c5d86fbb 100644
--- a/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
+++ b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
@@ -1,6 +1,6 @@
 import { useId } from "react";
 
-import dayjs from "@calcom/dayjs";
+import type dayjs from "@calcom/dayjs";
 
 export const HorizontalLines = ({
   hours,
@@ -23,14 +23,14 @@ export const HorizontalLines = ({
       {hours.map((hour) => (
         <>
           <div key={`${id}-${hour.get("hour")}`}>
-            <div className="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400">
+            <div className="text-muted sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5">
               {hour.format("h A")}
             </div>
           </div>
         </>
       ))}
       <div key={`${id}-${finalHour}`}>
-        <div className="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-gray-400">
+        <div className="text-muted sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5">
           {finalHour}
         </div>
       </div>
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index 6c07a2639d..a92d987bee 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
-import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
+import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -52,17 +52,17 @@ export default function ApiKeyDialogForm({
       {successfulNewApiKeyModal ? (
         <>
           <div className="mb-10">
-            <h2 className="font-semi-bold font-cal mb-2 text-xl tracking-wide text-gray-900">
+            <h2 className="font-semi-bold font-cal text-emphasis mb-2 text-xl tracking-wide">
               {t("success_api_key_created")}
             </h2>
-            <div className="text-sm text-gray-900">
+            <div className="text-emphasis text-sm">
               <span className="font-semibold">{t("success_api_key_created_bold_tagline")}</span>{" "}
               {t("you_will_only_view_it_once")}
             </div>
           </div>
           <div>
             <div className="flex">
-              <code className="mb-2 w-full truncate rounded-md rounded-r-none bg-gray-100 py-[6px] pl-2 pr-2 align-middle font-mono text-gray-800">
+              <code className="bg-subtle mb-2 w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono text-gray-800">
                 {" "}
                 {apiKey}
               </code>
@@ -79,7 +79,7 @@ export default function ApiKeyDialogForm({
                 </Button>
               </Tooltip>
             </div>
-            <span className="text-sm text-gray-400">
+            <span className="text-muted text-sm">
               {apiKeyDetails.neverExpires
                 ? t("never_expire_key")
                 : `${t("expires")} ${apiKeyDetails?.expiresAt?.toLocaleDateString()}`}
@@ -108,10 +108,10 @@ export default function ApiKeyDialogForm({
           }}
           className="space-y-4">
           <div className="mt-1 mb-10">
-            <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
+            <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
               {defaultValues ? t("edit_api_key") : t("create_api_key")}
             </h2>
-            <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_key_modal_subtitle")}</p>
+            <p className="text-subtle mt-1 mb-5 text-sm">{t("api_key_modal_subtitle")}</p>
           </div>
           <div>
             <Controller
@@ -134,7 +134,7 @@ export default function ApiKeyDialogForm({
           {!defaultValues && (
             <div className="flex flex-col">
               <div className="flex justify-between py-2">
-                <span className="block text-sm font-medium text-gray-700">{t("expire_date")}</span>
+                <span className="text-default block text-sm font-medium">{t("expire_date")}</span>
                 <Controller
                   name="neverExpires"
                   control={form.control}
diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
index 080e6d1bed..62d6e7ea07 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -1,7 +1,8 @@
 import dayjs from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import {
   Badge,
   Button,
@@ -48,7 +49,7 @@ const ApiKeyListItem = ({
           <p className="text-xs text-gray-600">
             {" "}
             {neverExpires ? (
-              <div className="flex flex-row space-x-3 text-gray-500">{t("api_key_never_expires")}</div>
+              <div className="text-subtle flex flex-row space-x-3">{t("api_key_never_expires")}</div>
             ) : (
               `${isExpired ? t("expired") : t("expires")} ${dayjs(apiKey?.expiresAt?.toString()).fromNow()}`
             )}
diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index 4dcac52653..a7666a58b8 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -1,17 +1,19 @@
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import stripejs, { StripeCardElementChangeEvent, StripeElementLocale } from "@stripe/stripe-js";
+import type { StripeCardElementChangeEvent, StripeElementLocale } from "@stripe/stripe-js";
+import type stripejs from "@stripe/stripe-js";
 import { useRouter } from "next/router";
 import { stringify } from "querystring";
-import { SyntheticEvent, useEffect, useState } from "react";
+import type { SyntheticEvent } from "react";
+import { useEffect, useState } from "react";
 
-import { StripePaymentData } from "@calcom/app-store/stripepayment/lib/server";
+import type { StripePaymentData } from "@calcom/app-store/stripepayment/lib/server";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 
 const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
   iconStyle: "solid" as const,
   classes: {
-    base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black text-sm",
+    base: "block p-2 w-full border-solid border-2 border-default rounded-md dark:bg-black dark:text-inverted dark:border-black focus-within:ring-black focus-within:border-black text-sm",
   },
   style: {
     base: {
@@ -116,7 +118,7 @@ export default function PaymentComponent(props: Props) {
         </Button>
       </div>
       {state.status === "error" && (
-        <div className="mt-4 text-center text-gray-700 dark:text-gray-300" role="alert">
+        <div className="text-default mt-4 text-center dark:text-gray-300" role="alert">
           {state.error.message}
         </div>
       )}
diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index 4dacf67a91..12eca7bd19 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -1,12 +1,13 @@
 import { Elements } from "@stripe/react-stripe-js";
 import classNames from "classnames";
 import Head from "next/head";
-import { FC, useEffect, useState } from "react";
+import type { FC } from "react";
+import { useEffect, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
 import { getSuccessPageLocationMessage } from "@calcom/app-store/locations";
 import getStripe from "@calcom/app-store/stripepayment/lib/client";
-import { StripePaymentData } from "@calcom/app-store/stripepayment/lib/server";
+import type { StripePaymentData } from "@calcom/app-store/stripepayment/lib/server";
 import dayjs from "@calcom/dayjs";
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
@@ -72,24 +73,24 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
               </span>
               <div
                 className={classNames(
-                  "main inline-block transform overflow-hidden rounded-lg border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800  sm:w-full sm:max-w-lg sm:py-6 sm:align-middle",
+                  "main bg-default inline-block transform overflow-hidden rounded-lg border border-neutral-200 px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800  sm:w-full sm:max-w-lg sm:py-6 sm:align-middle",
                   isEmbed ? "" : "sm:my-8"
                 )}
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                  <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <FiCreditCard className="h-8 w-8 text-green-600" />
                   </div>
 
                   <div className="mt-3 text-center sm:mt-5">
                     <h3
-                      className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white"
+                      className="text-emphasis dark:text-inverted text-2xl font-semibold leading-6"
                       id="modal-headline">
                       {t("payment")}
                     </h3>
-                    <div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 dark:border-gray-900 dark:text-gray-300">
+                    <div className="text-default mt-4 grid grid-cols-3 border-t border-b py-4 text-left dark:border-gray-900 dark:text-gray-300">
                       <div className="font-medium">{t("what")}</div>
                       <div className="col-span-2 mb-6">{eventName}</div>
                       <div className="font-medium">{t("when")}</div>
@@ -97,7 +98,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                         {date.format("dddd, DD MMMM YYYY")}
                         <br />
                         {date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "}
-                        <span className="text-gray-500">({timezone})</span>
+                        <span className="text-subtle">({timezone})</span>
                       </div>
                       {props.booking.location && (
                         <>
@@ -122,7 +123,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                 </div>
                 <div>
                   {props.payment.success && !props.payment.refunded && (
-                    <div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("paid")}</div>
+                    <div className="text-default mt-4 text-center dark:text-gray-300">{t("paid")}</div>
                   )}
                   {props.payment.appId === "stripe" && !props.payment.success && (
                     <Elements
@@ -138,11 +139,11 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                     </Elements>
                   )}
                   {props.payment.refunded && (
-                    <div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("refunded")}</div>
+                    <div className="text-default mt-4 text-center dark:text-gray-300">{t("refunded")}</div>
                   )}
                 </div>
                 {!props.profile.hideBranding && (
-                  <div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
+                  <div className="text-muted dark:text-inverted mt-4 border-t pt-4 text-center text-xs dark:border-gray-900">
                     <a href={`${WEBSITE_URL}/signup`}>
                       {t("create_booking_link_with_calcom", { appName: APP_NAME })}
                     </a>
diff --git a/packages/features/ee/sso/components/ConnectionInfo.tsx b/packages/features/ee/sso/components/ConnectionInfo.tsx
index 909c9dd3a6..94e2b14bfd 100644
--- a/packages/features/ee/sso/components/ConnectionInfo.tsx
+++ b/packages/features/ee/sso/components/ConnectionInfo.tsx
@@ -88,7 +88,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
           <Label>ACS URL</Label>
         </div>
         <div className="flex">
-          <code className="flex w-full items-center truncate rounded rounded-r-none bg-gray-100 pl-2 font-mono text-gray-800">
+          <code className="bg-subtle flex w-full items-center truncate rounded rounded-r-none pl-2 font-mono text-gray-800">
             {acsUrl}
           </code>
           <Tooltip side="top" content={t("copy_to_clipboard")}>
@@ -110,7 +110,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
           <Label>Entity ID</Label>
         </div>
         <div className="flex">
-          <code className="flex w-full items-center truncate rounded rounded-r-none bg-gray-100 pl-2 font-mono text-gray-800">
+          <code className="bg-subtle flex w-full items-center truncate rounded rounded-r-none pl-2 font-mono text-gray-800">
             {entityId}
           </code>
           <Tooltip side="top" content={t("copy_to_clipboard")}>
@@ -146,7 +146,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => {
           <Label>Callback URL</Label>
         </div>
         <div className="flex">
-          <code className="flex w-full items-center truncate rounded rounded-r-none bg-gray-100 pl-2 font-mono text-gray-800">
+          <code className="bg-subtle flex w-full items-center truncate rounded rounded-r-none pl-2 font-mono text-gray-800">
             {callbackUrl}
           </code>
           <Tooltip side="top" content={t("copy_to_clipboard")}>
diff --git a/packages/features/ee/sso/components/OIDCConnection.tsx b/packages/features/ee/sso/components/OIDCConnection.tsx
index 9a8a05a057..e33feb4736 100644
--- a/packages/features/ee/sso/components/OIDCConnection.tsx
+++ b/packages/features/ee/sso/components/OIDCConnection.tsx
@@ -27,7 +27,7 @@ export default function OIDCConnection({
       <div className="flex flex-col sm:flex-row">
         <div>
           <h2 className="font-medium">{t("sso_oidc_heading")}</h2>
-          <p className="text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
+          <p className="text-default text-sm font-normal leading-6 dark:text-gray-300">
             {t("sso_oidc_description")}
           </p>
         </div>
@@ -89,10 +89,10 @@ const CreateConnectionDialog = ({
             });
           }}>
           <div className="mb-10 mt-1">
-            <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
+            <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
               {t("sso_oidc_configuration_title")}
             </h2>
-            <p className="mt-1 mb-5 text-sm text-gray-500">{t("sso_oidc_configuration_description")}</p>
+            <p className="text-subtle mt-1 mb-5 text-sm">{t("sso_oidc_configuration_description")}</p>
           </div>
           <div className="space-y-5">
             <Controller
diff --git a/packages/features/ee/sso/components/SAMLConnection.tsx b/packages/features/ee/sso/components/SAMLConnection.tsx
index dcfdcf57b1..84b3fdf923 100644
--- a/packages/features/ee/sso/components/SAMLConnection.tsx
+++ b/packages/features/ee/sso/components/SAMLConnection.tsx
@@ -25,7 +25,7 @@ export default function SAMLConnection({
       <div className="flex flex-col sm:flex-row">
         <div>
           <h2 className="font-medium">{t("sso_saml_heading")}</h2>
-          <p className="text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
+          <p className="text-default text-sm font-normal leading-6 dark:text-gray-300">
             {t("sso_saml_description")}
           </p>
         </div>
@@ -83,10 +83,10 @@ const CreateConnectionDialog = ({
             });
           }}>
           <div className="mb-10 mt-1">
-            <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
+            <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
               {t("sso_saml_configuration_title")}
             </h2>
-            <p className="mt-1 mb-5 text-sm text-gray-500">{t("sso_saml_configuration_description")}</p>
+            <p className="text-subtle mt-1 mb-5 text-sm">{t("sso_saml_configuration_description")}</p>
           </div>
           <Controller
             control={form.control}
diff --git a/packages/features/ee/sso/page/teams-sso-view.tsx b/packages/features/ee/sso/page/teams-sso-view.tsx
index a68c330a29..f0f895e3b3 100644
--- a/packages/features/ee/sso/page/teams-sso-view.tsx
+++ b/packages/features/ee/sso/page/teams-sso-view.tsx
@@ -38,7 +38,7 @@ const SAMLSSO = () => {
   }
 
   return (
-    <div className="w-full bg-white sm:mx-0 xl:mt-0">
+    <div className="w-full bg-default sm:mx-0 xl:mt-0">
       <Meta title={t("sso_configuration")} description={t("sso_configuration_description")} />
       <SSOConfiguration teamId={teamId} />
     </div>
diff --git a/packages/features/ee/sso/page/user-sso-view.tsx b/packages/features/ee/sso/page/user-sso-view.tsx
index 451afa8a64..73d3f09641 100644
--- a/packages/features/ee/sso/page/user-sso-view.tsx
+++ b/packages/features/ee/sso/page/user-sso-view.tsx
@@ -16,7 +16,7 @@ const SAMLSSO = () => {
   }
 
   return (
-    <div className="w-full bg-white sm:mx-0 xl:mt-0">
+    <div className="w-full bg-default sm:mx-0 xl:mt-0">
       <Meta title={t("sso_configuration")} description={t("sso_configuration_description")} />
       <SSOConfiguration teamId={null} />
     </div>
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index fbcf0aa9b2..61f739c1dc 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -43,18 +43,18 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
   };
 
   return (
-    <div className="w-full rounded-md border-gray-300 bg-white">
+    <div className="bg-default border-default w-full rounded-md">
       <div className="w-full py-5">
-        <p className="mb-1 px-5 text-gray-500">{t("resources").toUpperCase()}</p>
+        <p className="text-subtle mb-1 px-5">{t("resources").toUpperCase()}</p>
         <a
           href="https://docs.cal.com/"
           target="_blank"
-          className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium"
           rel="noreferrer">
           {t("support_documentation")}
           <FiExternalLink
             className={classNames(
-              "text-gray-400 group-hover:text-gray-500",
+              "group-hover:text-subtle text-muted",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
             )}
           />
@@ -62,12 +62,12 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         <a
           href="https://developer.cal.com/"
           target="_blank"
-          className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium"
           rel="noreferrer">
           {t("developer_documentation")}
           <FiExternalLink
             className={classNames(
-              "text-gray-400 group-hover:text-gray-500",
+              "group-hover:text-subtle text-muted",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
             )}
           />
@@ -77,16 +77,16 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         </div>
       </div>
 
-      <hr className=" bg-gray-200" />
+      <hr className=" bg-emphasis" />
       <div className="w-full p-5">
-        <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>
+        <p className="text-subtle mb-1">{t("feedback").toUpperCase()}</p>
+        <p className="text-default flex w-full py-2 text-sm font-medium">{t("comments")}</p>
         <textarea
           id="comment"
           name="comment"
           rows={3}
           onChange={(event) => setComment(event.target.value)}
-          className="my-1 block  w-full rounded-sm border-gray-300 py-2 pb-2 text-sm"
+          className="border-default my-1  block w-full rounded-sm py-2 pb-2 text-sm"
         />
 
         <div className="my-3 flex justify-end">
@@ -187,7 +187,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           </Button>
         </div>
         {mutation.isError && (
-          <div className="mb-4 flex bg-red-100 p-4 text-sm text-red-700">
+          <div className="bg-error mb-4 flex p-4 text-sm text-red-700">
             <div className="flex-shrink-0">
               <FiAlertTriangle className="h-5 w-5" />
             </div>
@@ -198,10 +198,10 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           </div>
         )}
       </div>
-      <div className="w-full bg-neutral-50 p-5 text-gray-500">
+      <div className="text-subtle w-full bg-neutral-50 p-5">
         <p className="">{t("specific_issue")}</p>
         <button
-          className="font-medium  underline hover:text-gray-700"
+          className="hover:text-default  font-medium underline"
           onClick={() => {
             setActive(true);
             if (isFreshChatEnabled) {
@@ -216,7 +216,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         <span> {t("or").toLowerCase()} </span>
         <a
           onClick={() => onHelpItemSelect()}
-          className="font-medium  underline hover:text-gray-700"
+          className="hover:text-default  font-medium underline"
           href="https://docs.cal.com/"
           target="_blank"
           rel="noreferrer">
diff --git a/packages/features/ee/support/lib/freshchat/FreshChatMenuItem.tsx b/packages/features/ee/support/lib/freshchat/FreshChatMenuItem.tsx
index 4d51ae89be..49c81a7300 100644
--- a/packages/features/ee/support/lib/freshchat/FreshChatMenuItem.tsx
+++ b/packages/features/ee/support/lib/freshchat/FreshChatMenuItem.tsx
@@ -22,7 +22,7 @@ export default function FreshChatMenuItem(props: FreshChatMenuItemProps) {
           setActive(true);
           onHelpItemSelect();
         }}
-        className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+        className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium">
         {t("contact_support")}
       </button>
     </>
diff --git a/packages/features/ee/support/lib/helpscout/HelpscoutMenuItem.tsx b/packages/features/ee/support/lib/helpscout/HelpscoutMenuItem.tsx
index 5cb12d548c..96e762d38b 100644
--- a/packages/features/ee/support/lib/helpscout/HelpscoutMenuItem.tsx
+++ b/packages/features/ee/support/lib/helpscout/HelpscoutMenuItem.tsx
@@ -27,7 +27,7 @@ export default function HelpscoutMenuItem(props: HelpscoutMenuItemProps) {
     <>
       <button
         onClick={handleClick}
-        className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+        className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium">
         {t("contact_support")}
       </button>
 
diff --git a/packages/features/ee/support/lib/intercom/IntercomMenuItem.tsx b/packages/features/ee/support/lib/intercom/IntercomMenuItem.tsx
index d541c5ab6c..e0dd975a7c 100644
--- a/packages/features/ee/support/lib/intercom/IntercomMenuItem.tsx
+++ b/packages/features/ee/support/lib/intercom/IntercomMenuItem.tsx
@@ -20,7 +20,7 @@ export default function IntercomMenuItem(props: IntercomMenuItemProps) {
         show();
         onHelpItemSelect();
       }}
-      className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+      className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium">
       {t("contact_support")}
     </button>
   );
diff --git a/packages/features/ee/support/lib/zendesk/ZendeskMenuItem.tsx b/packages/features/ee/support/lib/zendesk/ZendeskMenuItem.tsx
index cc5cdf63be..b250436c0b 100644
--- a/packages/features/ee/support/lib/zendesk/ZendeskMenuItem.tsx
+++ b/packages/features/ee/support/lib/zendesk/ZendeskMenuItem.tsx
@@ -24,7 +24,7 @@ export default function ZendeskMenuItem(props: ZendeskMenuItemProps) {
           setActive(true);
           onHelpItemSelect();
         }}
-        className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+        className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium">
         {t("contact_support")}
       </button>
       {active && (
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index b09e32148b..b2df337aba 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -7,7 +7,8 @@ import MemberInvitationModal from "@calcom/features/ee/teams/components/MemberIn
 import { classNames } from "@calcom/lib";
 import { WEBAPP_URL, APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Avatar, Badge, Button, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
 import { FiPlus, FiArrowRight, FiTrash2 } from "@calcom/ui/components/icon";
 
@@ -112,7 +113,7 @@ const AddNewTeamMemberSkeleton = () => {
     <SkeletonContainer className="rounded-md border">
       <div className="flex w-full justify-between p-4">
         <div>
-          <p className="text-sm font-medium text-gray-900">
+          <p className="text-emphasis text-sm font-medium">
             <SkeletonText className="h-4 w-56" />
           </p>
           <div className="mt-2.5 w-max">
diff --git a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
index 77aa579f91..4194769ce7 100644
--- a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
+++ b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
@@ -37,7 +37,7 @@ const DisableTeamImpersonation = ({
             <h2
               className={classNames(
                 "font-cal mb-0.5 text-sm font-semibold leading-6",
-                disabled ? "text-gray-400 " : "text-gray-900 "
+                disabled ? "text-muted " : "text-emphasis "
               )}>
               {t("user_impersonation_heading")}
             </h2>
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index 070512d825..5fb1e8f13d 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -1,5 +1,6 @@
 import { MembershipRole } from "@prisma/client";
-import { SyntheticEvent, useMemo, useState } from "react";
+import type { SyntheticEvent } from "react";
+import { useMemo, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -71,14 +72,14 @@ export default function MemberChangeRoleModal(props: {
         <>
           <div className="mb-4 sm:flex sm:items-start">
             <div className="text-center sm:text-left">
-              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+              <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
                 {t("change_member_role")}
               </h3>
             </div>
           </div>
           <form onSubmit={changeRole}>
             <div className="mb-4">
-              <label className="mb-2 block text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
+              <label className="text-default mb-2 block text-sm font-medium tracking-wide" htmlFor="role">
                 {t("role")}
               </label>
               {/*<option value="OWNER">{t("owner")}</option> - needs dialog to confirm change of ownership */}
@@ -88,7 +89,7 @@ export default function MemberChangeRoleModal(props: {
                 value={role}
                 onChange={(option) => option && setRole(option)}
                 id="role"
-                className="mt-1 block w-full rounded-md border-gray-300 text-sm"
+                className="border-default mt-1 block w-full rounded-md text-sm"
               />
             </div>
             {errorMessage && (
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 3b2c47401a..33b5621e7b 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -1,4 +1,4 @@
-import { MembershipRole } from "@prisma/client";
+import type { MembershipRole } from "@prisma/client";
 import { Trans } from "next-i18next";
 import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -17,7 +17,7 @@ import {
   ToggleGroup,
 } from "@calcom/ui";
 
-import { PendingMember } from "../lib/types";
+import type { PendingMember } from "../lib/types";
 
 type MemberInvitationModalProps = {
   isOpen: boolean;
@@ -69,9 +69,9 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
         title={t("invite_new_member")}
         description={
           IS_TEAM_BILLING_ENABLED ? (
-            <span className="text-sm leading-tight text-gray-500">
+            <span className="text-subtle text-sm leading-tight">
               <Trans i18nKey="invite_new_member_description">
-                Note: This will <span className="font-medium text-gray-900">cost an extra seat ($15/m)</span>{" "}
+                Note: This will <span className="text-emphasis font-medium">cost an extra seat ($15/m)</span>{" "}
                 on your subscription.
               </Trans>
             </span>
@@ -108,7 +108,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               defaultValue={options[0].value}
               render={({ field: { onChange } }) => (
                 <div>
-                  <Label className="font-medium text-gray-900" htmlFor="role">
+                  <Label className="text-emphasis font-medium" htmlFor="role">
                     {t("role")}
                   </Label>
                   <ToggleGroup
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index 7f654af20e..935c5a92a7 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -123,7 +123,7 @@ export default function MemberListItem(props: Props) {
         </div>
         {props.team.membership.accepted && (
           <div className="flex items-center justify-center">
-            <ButtonGroup combined containerProps={{ className: "border-gray-300 hidden md:flex" }}>
+            <ButtonGroup combined containerProps={{ className: "border-default hidden md:flex" }}>
               {/* TODO: bring availability back. right now its ugly and broken
                <Tooltip
                 content={
diff --git a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
index 2924c5b78b..e26fbb446a 100644
--- a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
+++ b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
@@ -3,7 +3,7 @@ import { SkeletonText } from "@calcom/ui";
 function SkeletonLoaderTeamList() {
   return (
     <>
-      <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-default sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
diff --git a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
index 281d2d109b..5cef81630c 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx
@@ -2,7 +2,8 @@ import { useEffect, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import type { ITimezone } from "@calcom/ui";
 import { Avatar, DatePickerField as DatePicker, Select, TimezoneSelect } from "@calcom/ui";
 
@@ -38,8 +39,8 @@ 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-gray-700">{props.member?.name}</span>
-              <span className="-mt-1 block text-sm text-gray-400">{props.member?.email}</span>
+              <span className="text-default text-lg font-bold">{props.member?.name}</span>
+              <span className="text-muted -mt-1 block text-sm">{props.member?.email}</span>
             </div>
           </div>
           <div className="flex flex-col">
@@ -58,7 +59,7 @@ export default function TeamAvailabilityModal(props: Props) {
               value={selectedTimeZone}
               onChange={(timezone) => setSelectedTimeZone(timezone.value)}
               classNamePrefix="react-select"
-              className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 text-sm focus:border-neutral-800 focus:ring-neutral-800"
+              className="react-select-container border-default mt-1 block w-full rounded-sm border text-sm focus:border-neutral-800 focus:ring-neutral-800"
             />
           </div>
           <div>
@@ -71,7 +72,7 @@ export default function TeamAvailabilityModal(props: Props) {
               ]}
               isSearchable={false}
               classNamePrefix="react-select"
-              className="react-select-container focus:ring-primary-500 focus:border-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
+              className="react-select-container focus:ring-primary-500 focus:border-primary-500 border-default block w-full min-w-0 flex-1 rounded-sm border text-sm"
               value={{ value: frequency, label: `${frequency} minutes` }}
               onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
             />
diff --git a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
index bfa0df17f8..99dc607499 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityScreen.tsx
@@ -1,10 +1,12 @@
-import { CSSProperties, useEffect, useState } from "react";
+import type { CSSProperties } from "react";
+import { useEffect, useState } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
 
 import dayjs from "@calcom/dayjs";
 import { CAL_URL } from "@calcom/lib/constants";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import type { ITimezone } from "@calcom/ui";
 import { Avatar, DatePickerField as DatePicker, Select, TimezoneSelect } from "@calcom/ui";
 
@@ -48,8 +50,8 @@ 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-gray-700">{member?.name}</span>
-                <span className="-mt-1 block truncate text-sm text-gray-400">{member?.email}</span>
+                <span className="text-default truncate text-lg font-bold">{member?.name}</span>
+                <span className="text-muted -mt-1 block truncate text-sm">{member?.email}</span>
               </div>
             </div>
           }
@@ -59,10 +61,10 @@ export default function TeamAvailabilityScreen(props: Props) {
   };
 
   return (
-    <div className="flex flex-1 flex-col rounded-sm border border-neutral-200 bg-white">
+    <div className="bg-default flex flex-1 flex-col rounded-sm border border-neutral-200">
       <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-gray-700">Date</span>
+          <span className="text-default text-sm font-medium">Date</span>
           <DatePicker
             date={selectedDate.toDate()}
             className="p-1.5"
@@ -72,17 +74,17 @@ export default function TeamAvailabilityScreen(props: Props) {
           />
         </div>
         <div className="flex flex-col">
-          <span className="text-sm font-medium text-gray-700">Timezone</span>
+          <span className="text-default text-sm font-medium">Timezone</span>
           <TimezoneSelect
             id="timeZone"
             value={selectedTimeZone}
             onChange={(timezone) => setSelectedTimeZone(timezone.value)}
             classNamePrefix="react-select"
-            className="react-select-container w-full rounded-sm border border-gray-300 text-sm"
+            className="react-select-container border-default w-full rounded-sm border text-sm"
           />
         </div>
         <div className="hidden sm:block">
-          <span className="text-sm font-medium text-gray-700">Slot Length</span>
+          <span className="text-default text-sm font-medium">Slot Length</span>
           <Select
             options={[
               { value: 15, label: "15 minutes" },
@@ -90,7 +92,7 @@ export default function TeamAvailabilityScreen(props: Props) {
               { value: 60, label: "60 minutes" },
             ]}
             isSearchable={false}
-            className="block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
+            className="border-default block w-full min-w-0 flex-1 rounded-sm border text-sm"
             value={{ value: frequency, label: `${frequency} minutes` }}
             onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
           />
diff --git a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
index bfa1aef760..07b9944932 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
@@ -1,8 +1,8 @@
 import classNames from "classnames";
 import React from "react";
-import { ITimezone } from "react-timezone-select";
+import type { ITimezone } from "react-timezone-select";
 
-import { Dayjs } from "@calcom/dayjs";
+import type { Dayjs } from "@calcom/dayjs";
 import getSlots from "@calcom/lib/slots";
 import { trpc } from "@calcom/trpc/react";
 import { Loader } from "@calcom/ui";
@@ -47,13 +47,13 @@ export default function TeamAvailabilityTimes(props: Props) {
       {isLoading && slots.length === 0 && <Loader />}
       {!isLoading && slots.length === 0 && (
         <div className="flex flex-col items-center justify-center pt-4">
-          <span className="text-sm text-gray-500">No Available Slots</span>
+          <span className="text-subtle text-sm">No Available Slots</span>
         </div>
       )}
       {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 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"
+            className="min-w-48 border-brand-default text-bookingdarker hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast dark:text-darkgray-800 bg-default dark:hover:text-inverted mb-2 mr-3 block flex-grow rounded-sm border py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 dark:hover:border-black dark:hover:bg-black"
             data-testid="time">
             {slot.time.format("HH:mm")}
           </a>
diff --git a/packages/features/ee/teams/components/TeamInviteList.tsx b/packages/features/ee/teams/components/TeamInviteList.tsx
index 84c74ff82f..2dfa0ef7bc 100644
--- a/packages/features/ee/teams/components/TeamInviteList.tsx
+++ b/packages/features/ee/teams/components/TeamInviteList.tsx
@@ -47,7 +47,7 @@ export default function TeamInviteList(props: Props) {
 
   return (
     <div>
-      <ul className="mb-8 divide-y divide-neutral-200 rounded bg-white">
+      <ul className="mb-8 divide-y divide-neutral-200 rounded bg-default">
         {props.teams.map((team) => (
           <TeamInviteListItem
             key={team?.id as number}
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 96c4e79671..e8f89c97a3 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -1,4 +1,4 @@
-import { MembershipRole } from "@prisma/client";
+import type { MembershipRole } from "@prisma/client";
 
 import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
@@ -68,8 +68,8 @@ export default function TeamInviteListItem(props: Props) {
         className=""
       />
       <div className="inline-block ltr:ml-3 rtl:mr-3">
-        <span className="text-sm font-semibold text-black">{team.name}</span>
-        <span className="block text-sm leading-5 text-gray-700">
+        <span className="text-emphasis text-sm font-semibold">{team.name}</span>
+        <span className="text-default block text-sm leading-5">
           {t("invited_by_team", { teamName: team.name, role: t(team.role.toLocaleLowerCase()) })}
         </span>
       </div>
@@ -77,7 +77,7 @@ export default function TeamInviteListItem(props: Props) {
   );
 
   return (
-    <li className="divide-y rounded-md border border-gray-400 bg-gray-100 px-5 py-4">
+    <li className="bg-subtle border-emphasis divide-y rounded-md border px-5 py-4">
       <div
         className={classNames(
           "flex items-center  justify-between",
diff --git a/packages/features/ee/teams/components/TeamList.tsx b/packages/features/ee/teams/components/TeamList.tsx
index 02fab0dac2..820895c45e 100644
--- a/packages/features/ee/teams/components/TeamList.tsx
+++ b/packages/features/ee/teams/components/TeamList.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Card, showToast } from "@calcom/ui";
 import { FiUserPlus, FiUsers, FiEdit } from "@calcom/ui/components/icon";
 
@@ -41,7 +42,7 @@ export default function TeamList(props: Props) {
   }
 
   return (
-    <ul className="mb-2 divide-y divide-neutral-200 rounded border bg-white">
+    <ul className="bg-default mb-2 divide-y divide-neutral-200 rounded border">
       {props.teams.map((team) => (
         <TeamListItem
           key={team?.id as number}
@@ -59,8 +60,8 @@ export default function TeamList(props: Props) {
           {props.teams.map(
             (team, i) =>
               i === 0 && (
-                <div className="bg-gray-100 p-6">
-                  <h3 className="mb-4 text-sm font-semibold text-gray-900">{t("recommended_next_steps")}</h3>
+                <div className="bg-subtle p-6">
+                  <h3 className="text-emphasis mb-4 text-sm font-semibold">{t("recommended_next_steps")}</h3>
                   <div className="grid-col-1 grid gap-2 md:grid-cols-3">
                     <Card
                       icon={<FiUserPlus className="h-5 w-5 text-green-700" />}
@@ -72,7 +73,7 @@ export default function TeamList(props: Props) {
                         child: t("invite"),
                       }}
                     />
-                    {/* @TODO: uncomment once managed event types is live 
+                    {/* @TODO: uncomment once managed event types is live
                     <Card
                       icon={<FiUnlock className="h-5 w-5 text-blue-700" />}
                       variant="basic"
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index a237d72581..66a29ed84d 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -7,7 +7,8 @@ import MemberInvitationModal from "@calcom/ee/teams/components/MemberInvitationM
 import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import {
   Avatar,
   Button,
@@ -97,8 +98,8 @@ export default function TeamListItem(props: Props) {
         className="inline-flex justify-center"
       />
       <div className="inline-block ltr:ml-3 rtl:mr-3">
-        <span className="text-sm font-bold text-gray-700">{team.name}</span>
-        <span className="block text-xs text-gray-400">
+        <span className="text-default text-sm font-bold">{team.name}</span>
+        <span className="text-muted block text-xs">
           {team.slug ? `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}` : "Unpublished team"}
         </span>
       </div>
diff --git a/packages/features/ee/teams/components/TeamPill.tsx b/packages/features/ee/teams/components/TeamPill.tsx
index 92937fdd16..921dad540a 100644
--- a/packages/features/ee/teams/components/TeamPill.tsx
+++ b/packages/features/ee/teams/components/TeamPill.tsx
@@ -14,10 +14,10 @@ export default function TeamPill(props: Props) {
   return (
     <div
       className={classNames("text-medium self-center rounded-md px-1 py-0.5 text-xs ltr:mr-1 rtl:ml-1", {
-        " bg-gray-100 text-gray-800": !props.color,
-        " bg-blue-100 text-blue-800": props.color === "blue",
-        " bg-red-100 text-red-800 ": props.color === "red",
-        " bg-orange-100 text-orange-800": props.color === "orange",
+        " bg-subtle text-gray-800": !props.color,
+        " bg-info text-blue-800": props.color === "blue",
+        " bg-error text-red-800 ": props.color === "red",
+        " bg-attention text-orange-800": props.color === "orange",
       })}>
       {props.text}
     </div>
diff --git a/packages/features/ee/teams/components/TeamsListing.tsx b/packages/features/ee/teams/components/TeamsListing.tsx
index b4d449cf1f..073507db1e 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -86,8 +86,8 @@ export function TeamsListing() {
         }>
         <>
           {invites.length > 0 && (
-            <div className="mb-6 rounded-md bg-gray-100 p-5">
-              <Label className="dark:text-darkgray-900 pb-2 font-semibold text-gray-900">
+            <div className="bg-subtle mb-6 rounded-md p-5">
+              <Label className="dark:text-darkgray-900 text-emphasis pb-2 font-semibold">
                 {t("pending_invites")}
               </Label>
               <TeamList teams={invites} />
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
index 91569754e1..16de424af3 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
@@ -3,7 +3,8 @@ import { useEffect, useState } from "react";
 import dayjs from "@calcom/dayjs";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import type { ITimezone } from "@calcom/ui";
 import { Avatar, DatePicker, Label, Select, TimezoneSelect } from "@calcom/ui";
 
@@ -42,7 +43,7 @@ export default function TeamAvailabilityModal(props: Props) {
                 alt={props.member?.name || ""}
               />
               <div className="flex items-center justify-center ">
-                <span className="ml-2 text-base font-semibold leading-4 text-gray-500">
+                <span className="text-subtle ml-2 text-base font-semibold leading-4">
                   {props.member?.name}
                 </span>
               </div>
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
index bfa0df17f8..99dc607499 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityScreen.tsx
@@ -1,10 +1,12 @@
-import { CSSProperties, useEffect, useState } from "react";
+import type { CSSProperties } from "react";
+import { useEffect, useState } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
 
 import dayjs from "@calcom/dayjs";
 import { CAL_URL } from "@calcom/lib/constants";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import type { ITimezone } from "@calcom/ui";
 import { Avatar, DatePickerField as DatePicker, Select, TimezoneSelect } from "@calcom/ui";
 
@@ -48,8 +50,8 @@ 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-gray-700">{member?.name}</span>
-                <span className="-mt-1 block truncate text-sm text-gray-400">{member?.email}</span>
+                <span className="text-default truncate text-lg font-bold">{member?.name}</span>
+                <span className="text-muted -mt-1 block truncate text-sm">{member?.email}</span>
               </div>
             </div>
           }
@@ -59,10 +61,10 @@ export default function TeamAvailabilityScreen(props: Props) {
   };
 
   return (
-    <div className="flex flex-1 flex-col rounded-sm border border-neutral-200 bg-white">
+    <div className="bg-default flex flex-1 flex-col rounded-sm border border-neutral-200">
       <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-gray-700">Date</span>
+          <span className="text-default text-sm font-medium">Date</span>
           <DatePicker
             date={selectedDate.toDate()}
             className="p-1.5"
@@ -72,17 +74,17 @@ export default function TeamAvailabilityScreen(props: Props) {
           />
         </div>
         <div className="flex flex-col">
-          <span className="text-sm font-medium text-gray-700">Timezone</span>
+          <span className="text-default text-sm font-medium">Timezone</span>
           <TimezoneSelect
             id="timeZone"
             value={selectedTimeZone}
             onChange={(timezone) => setSelectedTimeZone(timezone.value)}
             classNamePrefix="react-select"
-            className="react-select-container w-full rounded-sm border border-gray-300 text-sm"
+            className="react-select-container border-default w-full rounded-sm border text-sm"
           />
         </div>
         <div className="hidden sm:block">
-          <span className="text-sm font-medium text-gray-700">Slot Length</span>
+          <span className="text-default text-sm font-medium">Slot Length</span>
           <Select
             options={[
               { value: 15, label: "15 minutes" },
@@ -90,7 +92,7 @@ export default function TeamAvailabilityScreen(props: Props) {
               { value: 60, label: "60 minutes" },
             ]}
             isSearchable={false}
-            className="block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
+            className="border-default block w-full min-w-0 flex-1 rounded-sm border text-sm"
             value={{ value: frequency, label: `${frequency} minutes` }}
             onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
           />
diff --git a/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx b/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
index 975d81e3f5..f4fc266001 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
@@ -52,7 +52,7 @@ export default function TeamAvailabilityTimes(props: Props) {
       {isLoading && slots.length === 0 && <SkeletonLoader />}
       {!isLoading && slots.length === 0 ? (
         <div className="flex flex-col items-center justify-center pt-4">
-          <span className="text-sm text-gray-500">{t("no_available_slots")}</span>
+          <span className="text-subtle text-sm">{t("no_available_slots")}</span>
         </div>
       ) : (
         <>{!isLoading && <p className="mb-3 text-sm text-gray-600">{t("time_available")}</p>}</>
@@ -61,7 +61,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 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 "
+              className="min-w-48 border-brand-default text-bookingdarker dark:text-darkgray-800 bg-default mb-2 mr-3 block flex-grow rounded-md border 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/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index 453b60ff05..c4b677ef05 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -148,7 +148,7 @@ const ProfileView = () => {
               defaultValue={team.brandColor}
               render={() => (
                 <div>
-                  <p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
+                  <p className="text-emphasis mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
                   <ColorPicker
                     defaultValue={team.brandColor}
                     onChange={(value) => form.setValue("brandColor", value, { shouldDirty: true })}
@@ -162,7 +162,7 @@ const ProfileView = () => {
               defaultValue={team.darkBrandColor}
               render={() => (
                 <div className="mt-6 sm:mt-0">
-                  <p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
+                  <p className="text-emphasis mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
                   <ColorPicker
                     defaultValue={team.darkBrandColor}
                     onChange={(value) => form.setValue("darkBrandColor", value, { shouldDirty: true })}
@@ -176,10 +176,10 @@ const ProfileView = () => {
           <div className="flex flex-col gap-8">
             <div className="relative flex items-start">
               <div className="flex-grow text-sm">
-                <label htmlFor="hide-branding" className="font-medium text-gray-700">
+                <label htmlFor="hide-branding" className="text-default font-medium">
                   {t("disable_cal_branding", { appName: APP_NAME })}
                 </label>
-                <p className="text-gray-500">
+                <p className="text-subtle">
                   {t("team_disable_cal_branding_description", { appName: APP_NAME })}
                 </p>
               </div>
@@ -202,10 +202,10 @@ const ProfileView = () => {
             </div>
             <div className="relative flex items-start">
               <div className="flex-grow text-sm">
-                <label htmlFor="hide-branding" className="font-medium text-gray-700">
+                <label htmlFor="hide-branding" className="text-default font-medium">
                   {t("hide_book_a_team_member")}
                 </label>
-                <p className="text-gray-500">{t("hide_book_a_team_member_description")}</p>
+                <p className="text-subtle">{t("hide_book_a_team_member_description")}</p>
               </div>
               <div className="flex-none">
                 <Controller
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 34e7530037..36ee282cd9 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -248,14 +248,14 @@ const ProfileView = () => {
             <div className="flex">
               <div className="flex-grow">
                 <div>
-                  <Label className="text-black">{t("team_name")}</Label>
+                  <Label className="text-emphasis">{t("team_name")}</Label>
                   <p className="text-sm text-gray-800">{team?.name}</p>
                 </div>
                 {team && !isBioEmpty && (
                   <>
-                    <Label className="mt-5 text-black">{t("about")}</Label>
+                    <Label className="text-emphasis mt-5">{t("about")}</Label>
                     <div
-                      className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                      className="dark:text-darkgray-600 text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                       dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
                     />
                   </>
diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx
index a39e0a8d1b..ec574cdc1e 100644
--- a/packages/features/ee/video/ViewRecordingsDialog.tsx
+++ b/packages/features/ee/video/ViewRecordingsDialog.tsx
@@ -127,9 +127,7 @@ const ViewRecordingsList = ({ roomName, hasPaidPlan }: { roomName: string; hasPa
                   <h1 className="text-sm font-semibold">
                     {t("recording")} {index + 1}
                   </h1>
-                  <p className="text-sm font-normal text-gray-500">
-                    {convertSecondsToMs(recording.duration)}
-                  </p>
+                  <p className="text-subtle text-sm font-normal">{convertSecondsToMs(recording.duration)}</p>
                 </div>
                 {hasPaidPlan ? (
                   <Button
diff --git a/packages/features/ee/video/components/RecordingListItemSkeleton.tsx b/packages/features/ee/video/components/RecordingListItemSkeleton.tsx
index 700438f5b8..3be37a2c7a 100644
--- a/packages/features/ee/video/components/RecordingListItemSkeleton.tsx
+++ b/packages/features/ee/video/components/RecordingListItemSkeleton.tsx
@@ -4,7 +4,7 @@ export default function RecordingListItemSkeleton() {
   return (
     <div className="flex w-full justify-between rounded-md border p-2">
       <div>
-        <p className="pt-2 text-sm font-medium text-gray-900">
+        <p className="text-emphasis pt-2 text-sm font-medium">
           <SkeletonText className="h-3 w-56" />
         </p>
         <div className="mt-1 w-max">
diff --git a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx b/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
index d9639ef96a..e8ed0ced59 100644
--- a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
+++ b/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
@@ -10,7 +10,7 @@ export default function UpgradeRecordingBanner() {
   const router = useRouter();
 
   return (
-    <div className="flex items-start gap-2 rounded-md bg-gray-100 p-4">
+    <div className="bg-subtle flex items-start gap-2 rounded-md p-4">
       <FiUsers className="dark:bg-gray-90 inline-block h-5 w-5" />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-2">
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index fdbf2a945e..12a233cc0d 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -19,12 +19,12 @@ function WorkflowExample(props: WorkflowExampleType) {
     <div className="mx-2 my-2 max-h-24 max-w-[600px] rounded-md border border-solid p-6">
       <div className="flex ">
         <div className="flex items-center justify-center">
-          <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-white">
-            <Icon className="h-6 w-6 stroke-[2px] text-gray-700" />
+          <div className="bg-emphasis dark:bg-default mr-4 flex h-10 w-10 items-center justify-center rounded-full">
+            <Icon className="text-default h-6 w-6 stroke-[2px]" />
           </div>
         </div>
         <div className="m-auto w-full flex-grow items-center justify-center ">
-          <div className="line-clamp-2 text-semibold w-full text-sm font-medium leading-none text-gray-900">
+          <div className="line-clamp-2 text-semibold text-emphasis w-full text-sm font-medium leading-none">
             {text}
           </div>
         </div>
@@ -79,12 +79,12 @@ export default function EmptyScreen(props: {
   return (
     <>
       <div className="min-h-80 flex w-full flex-col items-center justify-center rounded-md ">
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-200 dark:bg-white">
-          <FiZap className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
+        <div className="bg-emphasis dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full">
+          <FiZap className="dark:bg-inverted inline-block h-10 w-10 stroke-[1.3px] dark:text-gray-600" />
         </div>
         <div className="max-w-[420px] text-center">
           <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
-          <p className="line-clamp-2 mt-3 text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
+          <p className="line-clamp-2 text-default mt-3 text-sm font-normal leading-6 dark:text-gray-300">
             {t("no_workflows_description")}
           </p>
           <div className="mt-8 ">
diff --git a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index db31f2cce6..ec5abc3024 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -99,17 +99,17 @@ const WorkflowListItem = (props: ItemProps) => {
 
   return (
     <div className="flex w-full items-center overflow-hidden rounded-md border border-gray-200 p-6 px-3 md:p-6">
-      <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-xs font-medium">
+      <div className="bg-subtle mr-4 flex h-10 w-10 items-center justify-center rounded-full text-xs font-medium">
         {getActionIcon(
           workflow.steps,
-          isActive ? "h-6 w-6 stroke-[1.5px] text-gray-700" : "h-6 w-6 stroke-[1.5px] text-gray-400"
+          isActive ? "h-6 w-6 stroke-[1.5px] text-default" : "h-6 w-6 stroke-[1.5px] text-muted"
         )}
       </div>
       <div className=" grow">
         <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-gray-500"
+            "text-emphasis mb-1 w-full truncate text-base font-medium leading-4 md:max-w-max",
+            workflow.name && isActive ? "text-emphasis" : "text-subtle"
           )}>
           {workflow.name
             ? workflow.name
@@ -121,7 +121,7 @@ const WorkflowListItem = (props: ItemProps) => {
         <div
           className={classNames(
             " flex w-fit items-center whitespace-nowrap rounded-sm text-sm leading-4",
-            isActive ? "text-gray-600" : "text-gray-400"
+            isActive ? "text-gray-600" : "text-muted"
           )}>
           <span className="mr-1">{t("to")}:</span>
           {Array.from(sendTo).map((sendToPerson, index) => {
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
index c488403c16..70905c5fe4 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
@@ -2,7 +2,7 @@ import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-neutral-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-neutral-200 bg-default sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
     </ul>
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
index 4cba08fe1e..59df23675d 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
@@ -3,7 +3,7 @@ import { FiBell, FiLink } from "@calcom/ui/components/icon";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border  border-gray-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border  border-gray-200 bg-default sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index 99c680a79f..f5b1c1374e 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -146,7 +146,7 @@ export default function WorkflowDetailsPage(props: Props) {
         </div>
 
         {/* Workflow Trigger Event & Steps */}
-        <div className="w-full rounded-md border border-gray-200 bg-gray-50 p-3 py-5 md:ml-3 md:p-8">
+        <div className="bg-muted w-full rounded-md border border-gray-200 p-3 py-5 md:ml-3 md:p-8">
           {form.getValues("trigger") && (
             <div>
               <WorkflowStepContainer form={form} teamId={teamId} />
@@ -169,14 +169,14 @@ export default function WorkflowDetailsPage(props: Props) {
             </>
           )}
           <div className="my-3 flex justify-center">
-            <FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
+            <FiArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
           </div>
           <div className="flex justify-center">
             <Button
               type="button"
               onClick={() => setIsAddActionDialogOpen(true)}
               color="secondary"
-              className="bg-white">
+              className="bg-default">
               {t("add_action")}
             </Button>
           </div>
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index 5919e5d825..9d8f4aebf4 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -61,7 +61,7 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
   return (
     <>
       {workflows && workflows.length > 0 ? (
-        <div className="overflow-hidden rounded-md border border-gray-200 bg-white sm:mx-0">
+        <div className="bg-default overflow-hidden rounded-md border border-gray-200 sm:mx-0">
           <ul className="divide-y divide-gray-200">
             {workflows.map((workflow) => (
               <li key={workflow.id}>
@@ -71,8 +71,8 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
                       <div className="flex">
                         <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-gray-500"
+                            "max-w-56 text-emphasis truncate text-sm font-medium leading-6 md:max-w-max",
+                            workflow.name ? "text-emphasis" : "text-subtle"
                           )}>
                           {workflow.name
                             ? workflow.name
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index 85dc8a4e8c..5ff2cf8fac 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -206,9 +206,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="flex justify-center">
-          <div className="min-w-80 w-full rounded-md border border-gray-200 bg-white p-7">
+          <div className="min-w-80 bg-default w-full rounded-md border border-gray-200 p-7">
             <div className="flex">
-              <div className="mt-[3px] flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs font-medium ltr:mr-5 rtl:ml-5">
+              <div className="bg-subtle mt-[3px] flex h-5 w-5 items-center justify-center rounded-full p-1 text-xs font-medium ltr:mr-5 rtl:ml-5">
                 1
               </div>
               <div>
@@ -281,15 +281,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="my-3 flex justify-center">
-          <FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
+          <FiArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
         </div>
         <div className="flex justify-center">
-          <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
+          <div className="min-w-80 bg-default flex w-full rounded-md border border-gray-200 p-7">
             <div className="w-full">
               <div className="flex">
                 <div className="w-full">
                   <div className="flex">
-                    <div className="mt-[3px] flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs ltr:mr-5 rtl:ml-5">
+                    <div className="bg-subtle mt-[3px] flex h-5 w-5 items-center justify-center rounded-full p-1 text-xs ltr:mr-5 rtl:ml-5">
                       {step.stepNumber + 1}
                     </div>
                     <div>
@@ -394,7 +394,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
               </div>
               {isPhoneNumberNeeded && (
-                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-0">
+                <div className="bg-muted mt-2 rounded-md p-4 pt-0">
                   <Label className="pt-4">{t("custom_phone_number")}</Label>
                   <div className="block sm:flex">
                     <Controller
@@ -480,7 +480,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   )}
                 </div>
               )}
-              <div className="mt-2 rounded-md bg-gray-50 p-4 pt-0">
+              <div className="bg-muted-4 mt-2 rounded-md pt-0">
                 {isSenderIdNeeded ? (
                   <>
                     <div className="pt-4">
@@ -530,7 +530,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               )}
               {isEmailAddressNeeded && (
-                <div className="mt-5 rounded-md bg-gray-50 p-4">
+                <div className="bg-muted-4 mt-5 rounded-md">
                   <EmailField
                     required
                     label={t("email_address")}
@@ -563,7 +563,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
               </div>
               {isCustomReminderBodyNeeded && (
-                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
+                <div className="bg-muted-4 mt-2 rounded-md pt-2 md:p-6 md:pt-4">
                   {isEmailSubjectNeeded && (
                     <div className="mb-6">
                       <div className="flex items-center">
@@ -757,9 +757,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           <DialogContent type="creation" className="sm:max-w-[610px] md:h-[570px]">
             <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
               <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
-              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
+              <div className="bg-muted-3 mb-7 mt-7 rounded-md sm:p-4">
                 <p className="test-sm font-medium">{t("format")}</p>
-                <ul className="mt-2 ml-5 list-disc text-gray-900">
+                <ul className="text-emphasis mt-2 ml-5 list-disc">
                   <li>{t("uppercase_for_letters")}</li>
                   <li>{t("replace_whitespaces_underscores")}</li>
                   <li>{t("ignore_special_characters")}</li>
@@ -770,10 +770,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     <div className="test-sm col-span-5 text-gray-600 ltr:mr-2 rtl:ml-2">
                       {t("additional_input_label")}
                     </div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("company_size")}</div>
+                    <div className="test-sm text-emphasis col-span-7">{t("company_size")}</div>
                     <div className="test-sm col-span-5 w-full text-gray-600">{t("variable")}</div>
 
-                    <div className="test-sm col-span-7 break-words text-gray-900">
+                    <div className="test-sm text-emphasis col-span-7 break-words">
                       {" "}
                       {`{${t("company_size")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
@@ -789,9 +789,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     <div className="test-sm col-span-5 text-gray-600 ltr:mr-2 rtl:ml-2">
                       {t("additional_input_label")}
                     </div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("what_help_needed")}</div>
+                    <div className="test-sm text-emphasis col-span-7">{t("what_help_needed")}</div>
                     <div className="test-sm col-span-5 text-gray-600">{t("variable")}</div>
-                    <div className="test-sm col-span-7 break-words text-gray-900">
+                    <div className="test-sm text-emphasis col-span-7 break-words">
                       {" "}
                       {`{${t("what_help_needed")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index 99283ba05c..ccc4d86811 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -181,7 +181,7 @@ const Filter = (props: {
   return (
     <div className={classNames("-mb-2", noFilter ? "w-16" : "w-[100px]")}>
       <AnimatedPopover text={noFilter ? "All" : "Filtered"}>
-        <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
+        <div className="item-center flex px-4 py-[6px] focus-within:bg-subtle hover:cursor-pointer hover:bg-muted">
           <Avatar
             imageSrc=""
             size="sm"
@@ -192,14 +192,14 @@ const Filter = (props: {
           />
           <label
             htmlFor="yourWorkflows"
-            className="ml-2 mr-auto self-center truncate text-sm font-medium text-gray-700">
+            className="ml-2 mr-auto self-center truncate text-sm font-medium text-default">
             {userName}
           </label>
 
           <input
             id="yourWorkflows"
             type="checkbox"
-            className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+            className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-default "
             checked={!!checked.userId}
             onChange={(e) => {
               if (e.target.checked) {
@@ -217,7 +217,7 @@ const Filter = (props: {
         </div>
         {teams.map((profile) => (
           <div
-            className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50"
+            className="item-center flex px-4 py-[6px] focus-within:bg-subtle hover:cursor-pointer hover:bg-muted
             key={`${profile.teamId || 0}`}>
             <Avatar
               imageSrc=""
@@ -229,7 +229,7 @@ const Filter = (props: {
             />
             <label
               htmlFor={profile.slug || ""}
-              className="ml-2 mr-auto select-none self-center truncate text-sm font-medium text-gray-700 hover:cursor-pointer">
+              className="ml-2 mr-auto select-none self-center truncate text-sm font-medium text-default hover:cursor-pointer">
               {profile.slug}
             </label>
 
@@ -264,7 +264,7 @@ const Filter = (props: {
                   }
                 }
               }}
-              className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
+              className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-default "
             />
           </div>
         ))}
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 0caee1b9ca..8cf8b32a70 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -270,7 +270,7 @@ function WorkflowPage() {
           session.data?.hasValidLicense &&
           isAllDataLoaded && (
             <div className="flex">
-              <div className={classNames(workflow && !workflow.name ? "text-gray-400" : "")}>
+              <div className={classNames(workflow && !workflow.name ? "text-muted" : "")}>
                 {workflow && workflow.name ? workflow.name : "untitled"}
               </div>
               {workflow && workflow.team && (
diff --git a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
index bea7a9f345..c1cddda3cb 100644
--- a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
+++ b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
@@ -47,10 +47,10 @@ export function BulkEditDefaultConferencingModal(props: { open: boolean; setOpen
           <div className="flex flex-col space-y-2">
             {data.eventTypes.length > 0 && (
               <div className="flex items-center space-x-2 rounded-md py-2.5 px-3">
-                <label className="w-full text-sm font-medium leading-none text-gray-900">
+                <label className="text-emphasis w-full text-sm font-medium leading-none">
                   <input
                     type="checkbox"
-                    className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 checked:bg-gray-800 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
+                    className="text-primary-600 focus:ring-primary-500 border-default hover:bg-subtle h-4 w-4 rounded checked:bg-gray-800 ltr:mr-2 rtl:ml-2"
                     onChange={(e) => {
                       form.setValue("eventTypeIds", e.target.checked ? data.eventTypes.map((e) => e.id) : []);
                     }}
@@ -61,14 +61,12 @@ export function BulkEditDefaultConferencingModal(props: { open: boolean; setOpen
               </div>
             )}
             {data.eventTypes.map((eventType) => (
-              <div
-                key={eventType.id}
-                className="flex items-center space-x-2 rounded-md bg-gray-50 py-2.5 px-3">
-                <label className="w-full text-sm font-medium leading-none text-gray-900">
+              <div key={eventType.id} className="bg-muted flex items-center space-x-2 rounded-md py-2.5 px-3">
+                <label className="text-emphasis w-full text-sm font-medium leading-none">
                   <input
                     type="checkbox"
                     checked={eventTypesSelected.includes(eventType.id)}
-                    className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 checked:bg-gray-800 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
+                    className="text-primary-600 focus:ring-primary-500 border-default hover:bg-subtle h-4 w-4 rounded checked:bg-gray-800 ltr:mr-2 rtl:ml-2"
                     onChange={(e) => {
                       form.setValue(
                         "eventTypeIds",
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
index 9b8297bed0..56f2d8a36f 100644
--- a/packages/features/eventtypes/components/CheckedTeamSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { Props } from "react-select";
+import type { Props } from "react-select";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -48,7 +48,7 @@ export const CheckedTeamSelect = ({
         {value.map((option, index) => (
           <li key={option.value} className={`flex py-2 px-3 ${index === value.length - 1 ? "" : "border-b"}`}>
             <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />
-            <p className="my-auto ml-3 text-sm text-gray-900">{option.label}</p>
+            <p className="text-emphasis my-auto ml-3 text-sm">{option.label}</p>
             <FiX
               onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
               className="my-auto ml-auto"
diff --git a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
index cea65f7aee..c23fd8a86d 100644
--- a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
@@ -191,7 +191,7 @@ export default function CreateEventTypeDialog() {
 
             {teamId && (
               <div className="mb-4">
-                <label htmlFor="schedulingType" className="block text-sm font-bold text-gray-700">
+                <label htmlFor="schedulingType" className="text-default block text-sm font-bold">
                   {t("scheduling_type")}
                 </label>
                 {form.formState.errors.schedulingType && (
diff --git a/packages/features/eventtypes/components/EmptyPage.tsx b/packages/features/eventtypes/components/EmptyPage.tsx
index ea85986902..0d5f5743e6 100644
--- a/packages/features/eventtypes/components/EmptyPage.tsx
+++ b/packages/features/eventtypes/components/EmptyPage.tsx
@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 const SkeletonEventType = () => {
   return (
-    <div className="dark:bg-darkgray-100 h-24 w-full bg-white">
+    <div className="dark:bg-darkgray-100 bg-default h-24 w-full">
       <div className="p-5">
         <div className="flex space-x-2 rtl:space-x-reverse">
           <div className="dark:bg-darkgray-400 h-2 w-1/6 rounded-md bg-neutral-200" />
@@ -32,8 +32,8 @@ function EmptyPage({ name }: { name: string }) {
         <SkeletonEventType />
       </div>
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-        <h3 className="text-lg font-semibold text-gray-600 dark:text-white">{t("no_event_types")} </h3>
-        <h4 className="text-sm leading-normal text-gray-600 dark:text-white">
+        <h3 className="dark:text-inverted text-lg font-semibold text-gray-600">{t("no_event_types")} </h3>
+        <h4 className="dark:text-inverted text-sm leading-normal text-gray-600">
           {t("no_event_types_description", { name })}
         </h4>
       </div>
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index a89611ba8d..6b6638d75c 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -49,11 +49,11 @@ export const EventTypeDescription = ({
 
   return (
     <>
-      <div className={classNames("dark:text-darkgray-800 text-gray-500", className)}>
+      <div className={classNames("dark:text-darkgray-800 text-subtle", className)}>
         {eventType.description && (
           <div
             className={classNames(
-              "dark:text-darkgray-800 max-w-[280px] break-words py-1 text-sm text-gray-500 sm:max-w-[500px] [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
+              "dark:text-darkgray-800 text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px] [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
               shortenDescription ? "line-clamp-4" : ""
             )}
             dangerouslySetInnerHTML={{
diff --git a/packages/features/eventtypes/components/MultiDropdownSelect.tsx b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
index 9b4ccd9bd0..9deff8d12d 100644
--- a/packages/features/eventtypes/components/MultiDropdownSelect.tsx
+++ b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
@@ -1,4 +1,5 @@
-import { components, GroupBase, Props, ValueContainerProps } from "react-select";
+import type { GroupBase, Props, ValueContainerProps } from "react-select";
+import { components } from "react-select";
 
 import { Select } from "@calcom/ui";
 import { FiPlus } from "@calcom/ui/components/icon";
@@ -21,7 +22,7 @@ const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends Gr
     <components.ValueContainer {...props}>
       {displayChips}
       {overflowCounter > 0 && (
-        <span className="flex items-center justify-center rounded-md bg-gray-100 py-[5px] px-2 text-[14px] font-medium leading-4 text-gray-700">
+        <span className="bg-subtle text-default flex items-center justify-center rounded-md py-[5px] px-2 text-[14px] font-medium leading-4">
           <>
             <FiPlus className="mr-1 inline h-3 w-3 stroke-[3px]" /> <span>{overflowCounter} more</span>
           </>
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 42871e038c..368adb92d2 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -124,14 +124,14 @@ export const Components: Record<BookingFieldType, Component> = {
       const { t } = useLocale();
       value = value || [];
       const inputClassName =
-        "dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500";
+        "dark:placeholder:text-darkgray-600 focus:border-brand-default dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-default text-sm focus:ring-black disabled:bg-emphasis disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-subtle";
       return (
         <>
           {value.length ? (
             <div>
               <label
                 htmlFor="guests"
-                className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                className="text-default dark:text-inverted mb-1 block text-sm font-medium">
                 {label}
               </label>
               <ul>
@@ -146,7 +146,7 @@ export const Components: Record<BookingFieldType, Component> = {
                       }}
                       className={classNames(inputClassName, "border-r-0")}
                       addOnClassname={classNames(
-                        "border-gray-300 border block border-l-0 disabled:bg-gray-200 disabled:hover:cursor-not-allowed bg-transparent disabled:text-gray-500 dark:border-darkgray-300 "
+                        "border-default border block border-l-0 disabled:bg-emphasis disabled:hover:cursor-not-allowed bg-transparent disabled:text-subtle dark:border-darkgray-300 "
                       )}
                       placeholder={placeholder}
                       label={<></>}
@@ -244,11 +244,11 @@ export const Components: Record<BookingFieldType, Component> = {
                     }
                     setValue(newValue);
                   }}
-                  className="dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 rounded border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                  className="dark:bg-darkgray-300 dark:border-darkgray-300 border-default text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
                   value={option.value}
                   checked={value.includes(option.value)}
                 />
-                <span className="text-sm ltr:ml-2 ltr:mr-2 rtl:ml-2 dark:text-white">
+                <span className="dark:text-inverted text-sm ltr:ml-2 ltr:mr-2 rtl:ml-2">
                   {option.label ?? ""}
                 </span>
               </label>
@@ -305,7 +305,7 @@ export const Components: Record<BookingFieldType, Component> = {
                         type="radio"
                         disabled={readOnly}
                         name={name}
-                        className="dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                        className="dark:bg-darkgray-300 dark:border-darkgray-300 border-default text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2"
                         value={option.value}
                         onChange={(e) => {
                           setValue({
@@ -315,7 +315,7 @@ export const Components: Record<BookingFieldType, Component> = {
                         }}
                         checked={value?.value === option.value}
                       />
-                      <span className="text-sm ltr:ml-2 ltr:mr-2 rtl:ml-2 dark:text-white">
+                      <span className="dark:text-inverted text-sm ltr:ml-2 ltr:mr-2 rtl:ml-2">
                         {option.label ?? ""}
                       </span>
                     </label>
@@ -370,12 +370,12 @@ export const Components: Record<BookingFieldType, Component> = {
                 setValue(false);
               }
             }}
-            className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
+            className="border-default disabled:bg-emphasis disabled:dark:text-subtle text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
             placeholder=""
             checked={value}
             disabled={readOnly}
           />
-          <Label className="-mt-px block text-sm font-medium text-gray-700 dark:text-white">{label}</Label>
+          <Label className="text-default dark:text-inverted -mt-px block text-sm font-medium">{label}</Label>
         </div>
       );
     },
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 6cdaaf5603..4556f2ad2c 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -174,7 +174,7 @@ export const FormBuilder = function FormBuilder({
     return (
       <div className={className}>
         <Label>{label}</Label>
-        <div className="rounded-md bg-gray-50 p-4">
+        <div className="bg-muted rounded-md p-4">
           <ul ref={animationRef}>
             {value?.map((option, index) => (
               <li key={index}>
@@ -260,8 +260,8 @@ export const FormBuilder = function FormBuilder({
   return (
     <div>
       <div>
-        <div className="text-sm font-semibold text-gray-700 ltr:mr-1 rtl:ml-1">{title}</div>
-        <p className="max-w-[280px] break-words py-1 text-sm text-gray-500 sm:max-w-[500px]">{description}</p>
+        <div className="text-default text-sm font-semibold ltr:mr-1 rtl:ml-1">{title}</div>
+        <p className="text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px]">{description}</p>
         <ul className="mt-2 rounded-md border">
           {fields.map((field, index) => {
             const fieldType = FieldTypesMap[field.type];
@@ -290,19 +290,19 @@ export const FormBuilder = function FormBuilder({
                 className="group relative flex items-center justify-between border-b p-4 last:border-b-0">
                 <button
                   type="button"
-                  className="invisible absolute -left-[12px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                  className="bg-default text-muted disabled:hover:text-muted hover:text-emphasis invisible absolute -left-[12px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                   onClick={() => swap(index, index - 1)}>
                   <FiArrowUp className="h-5 w-5" />
                 </button>
                 <button
                   type="button"
-                  className="invisible absolute -left-[12px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
+                  className="bg-default text-muted disabled:hover:text-muted hover:text-emphasis invisible absolute -left-[12px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                   onClick={() => swap(index, index + 1)}>
                   <FiArrowDown className="h-5 w-5" />
                 </button>
                 <div>
                   <div className="flex flex-col lg:flex-row lg:items-center">
-                    <div className="text-sm font-semibold text-gray-700 ltr:mr-1 rtl:ml-1">
+                    <div className="text-default text-sm font-semibold ltr:mr-1 rtl:ml-1">
                       {field.label || t(field.defaultLabel || "")}
                     </div>
                     <div className="flex items-center space-x-2">
@@ -316,7 +316,7 @@ export const FormBuilder = function FormBuilder({
                       ))}
                     </div>
                   </div>
-                  <p className="max-w-[280px] break-words py-1 text-sm text-gray-500 sm:max-w-[500px]">
+                  <p className="text-subtle max-w-[280px] break-words py-1 text-sm sm:max-w-[500px]">
                     {fieldType.label}
                   </p>
                 </div>
@@ -512,7 +512,7 @@ const WithLabel = ({
       {field.type !== "boolean" && field.type !== "multiemail" && field.label && (
         <div className="mb-2 flex items-center">
           <Label className="!mb-0 flex items-center">{field.label}</Label>
-          <span className="ml-1 -mb-1 text-sm font-medium leading-none dark:text-white">
+          <span className="dark:text-inverted ml-1 -mb-1 text-sm font-medium leading-none">
             {!readOnly && field.required ? "*" : ""}
           </span>
         </div>
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index 4b491d6a05..06eb3e9904 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -14,7 +14,8 @@ import { useMemo } from "react";
 import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Tooltip } from "@calcom/ui";
 import { FiSearch, FiArrowUp, FiArrowDown, FiCornerDownLeft, FiCommand } from "@calcom/ui/components/icon";
 
@@ -254,16 +255,16 @@ export const KBarContent = () => {
   return (
     <KBarPortal>
       <KBarPositioner>
-        <KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-md bg-white shadow-lg">
+        <KBarAnimator className="bg-default z-10 w-full max-w-screen-sm overflow-hidden rounded-md shadow-lg">
           <div className="flex items-center justify-center border-b">
-            <FiSearch className="mx-3 h-4 w-4 text-gray-500" />
+            <FiSearch className="text-subtle mx-3 h-4 w-4" />
             <KBarSearch
               defaultPlaceholder={t("kbar_search_placeholder")}
               className="w-full rounded-sm py-2.5 focus-visible:outline-none"
             />
           </div>
           <RenderResults />
-          <div className="hidden items-center space-x-1 border-t px-2 py-1.5 text-xs text-gray-500 sm:flex">
+          <div className="text-subtle hidden items-center space-x-1 border-t px-2 py-1.5 text-xs sm:flex">
             <FiArrowUp className="h-4 w-4" />
             <FiArrowDown className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
             <FiCornerDownLeft className="h-4 w-4" />
@@ -287,7 +288,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-gray-900">
+          className="hover:bg-subtle lg:hover:bg-emphasis lg:hover:text-emphasis group flex rounded-md py-2 px-3 text-sm font-medium lg:p-1">
           <FiSearch className="h-4 w-4 flex-shrink-0 text-inherit" />
         </button>
       </Tooltip>
@@ -302,7 +303,9 @@ const DisplayShortcuts = (item: shortcutArrayType) => {
     <span className="space-x-1">
       {shortcuts?.map((shortcut) => {
         return (
-          <kbd key={shortcut} className="rounded-sm border bg-white px-2 py-1 text-black hover:bg-gray-100">
+          <kbd
+            key={shortcut}
+            className="bg-default hover:bg-subtle text-emphasis rounded-sm border px-2 py-1">
             {shortcut}
           </kbd>
         );
@@ -320,7 +323,7 @@ function RenderResults() {
       items={results}
       onRender={({ item, active }) =>
         typeof item === "string" ? (
-          <div className="bg-white p-4 text-xs uppercase text-gray-500">{t(item)}</div>
+          <div className="bg-default text-subtle p-4 text-xs uppercase">{t(item)}</div>
         ) : (
           <div
             // For seeing keyboard up & down navigation in action, we need visual feedback based on "active" prop
diff --git a/packages/features/schedules/components/DateOverrideInputDialog.tsx b/packages/features/schedules/components/DateOverrideInputDialog.tsx
index a54a4092ba..52ce098c7a 100644
--- a/packages/features/schedules/components/DateOverrideInputDialog.tsx
+++ b/packages/features/schedules/components/DateOverrideInputDialog.tsx
@@ -138,7 +138,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-gray-500">{t("date_overrides_unavailable")}</p>
+                <p className="text-subtle rounded border p-2 text-sm">{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 9df265b9cd..9d7316da2d 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -57,7 +57,7 @@ const DateOverrideList = ({
       {items.sort(sortByDate).map((item, index) => (
         <li key={item.id} className="flex justify-between border-b px-5 py-4 last:border-b-0">
           <div>
-            <h3 className="text-sm text-gray-900">
+            <h3 className="text-emphasis text-sm">
               {new Intl.DateTimeFormat("en-GB", {
                 weekday: "short",
                 month: "long",
@@ -65,10 +65,10 @@ const DateOverrideList = ({
               }).format(item.ranges[0].start)}
             </h3>
             {item.ranges[0].start.valueOf() - item.ranges[0].end.valueOf() === 0 ? (
-              <p className="text-xs text-gray-500">{t("unavailable")}</p>
+              <p className="text-subtle text-xs">{t("unavailable")}</p>
             ) : (
               item.ranges.map((range, i) => (
-                <p key={i} className="text-xs text-gray-500">
+                <p key={i} className="text-subtle text-xs">
                   {timeSpan(range)}
                 </p>
               ))
@@ -88,7 +88,7 @@ const DateOverrideList = ({
                 <DialogTrigger asChild>
                   <Button
                     tooltip={t("edit")}
-                    className="text-gray-700"
+                    className="text-default"
                     color="minimal"
                     variant="icon"
                     StartIcon={FiEdit2}
@@ -98,7 +98,7 @@ const DateOverrideList = ({
             />
             <Tooltip content="Delete">
               <Button
-                className="text-gray-700"
+                className="text-default"
                 color="destructive"
                 variant="icon"
                 StartIcon={FiTrash2}
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 049c15670d..43285db9e9 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -102,8 +102,8 @@ const CopyButton = ({
       <DropdownMenuTrigger asChild>
         <Button
           className={classNames(
-            "text-gray-700",
-            open && "ring-brand-500 !bg-gray-100 outline-none ring-2 ring-offset-1"
+            "text-default",
+            open && "ring-brand-500 !bg-subtle outline-none ring-2 ring-offset-1"
           )}
           type="button"
           tooltip={t("copy_times_to_tooltip")}
@@ -184,7 +184,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
             {index === 0 && (
               <Button
                 tooltip={t("add_time_availability")}
-                className="mx-2 text-gray-700 "
+                className="text-default mx-2 "
                 type="button"
                 color="minimal"
                 variant="icon"
@@ -196,7 +196,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 }}
               />
             )}
-            {index !== 0 && <RemoveTimeButton index={index} remove={remove} className="mx-2 text-gray-700" />}
+            {index !== 0 && <RemoveTimeButton index={index} remove={remove} className="text-default mx-2" />}
           </div>
         </Fragment>
       ))}
@@ -374,7 +374,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-gray-400">{t("copy_times_to")}</p>
+        <p className="h6 text-muted pb-3 pl-1 text-xs font-medium uppercase">{t("copy_times_to")}</p>
         <ol className="space-y-2">
           {weekdayNames(i18n.language, weekStart).map((weekday, num) => {
             const weekdayIndex = (num + weekStart) % 7;
@@ -394,7 +394,7 @@ const CopyTimes = ({
                       }
                     }}
                     type="checkbox"
-                    className="inline-block rounded-[4px] border-gray-300 text-gray-900 focus:ring-neutral-500 disabled:text-gray-400"
+                    className="border-default text-emphasis disabled:text-muted inline-block rounded-[4px] focus:ring-neutral-500"
                   />
                 </label>
               </li>
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 67799ae0ad..7a99ca5e8e 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -43,14 +43,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-gray-900">{schedule.name}</span>
+              <span className="text-emphasis truncate font-medium">{schedule.name}</span>
               {schedule.isDefault && (
                 <Badge variant="success" className="text-xs">
                   {t("default")}
                 </Badge>
               )}
             </div>
-            <p className="mt-1 text-gray-500">
+            <p className="text-subtle mt-1">
               {schedule.availability
                 .filter((availability) => !!availability.days.length)
                 .map((availability) => (
diff --git a/packages/features/settings/ThemeLabel.tsx b/packages/features/settings/ThemeLabel.tsx
index 6329845869..f5cc8e1d46 100644
--- a/packages/features/settings/ThemeLabel.tsx
+++ b/packages/features/settings/ThemeLabel.tsx
@@ -29,7 +29,7 @@ export default function ThemeLabel(props: ThemeLabelProps) {
           alt={`theme ${variant}`}
         />
       </div>
-      <p className="mt-2 text-sm font-medium text-gray-600 peer-checked:text-gray-900">{label}</p>
+      <p className="peer-checked:text-emphasis mt-2 text-sm font-medium text-gray-600">{label}</p>
     </label>
   );
 }
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 1e8974752f..5ff529609a 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -126,7 +126,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
   return (
     <Link
       href="/"
-      className="group my-6 flex h-6 max-h-6 w-64 flex-row items-center rounded-md py-2 px-3 text-sm font-medium leading-4 text-black hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900"
+      className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-64 flex-row items-center rounded-md py-2 px-3 text-sm font-medium leading-4"
       data-testid={`vertical-tab-${name}`}>
       <FiArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] md:mt-0" />
       <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate">
@@ -172,7 +172,7 @@ const SettingsSidebarContainer = ({
   return (
     <nav
       className={classNames(
-        "no-scrollbar fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll bg-gray-50 px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
+        "no-scrollbar bg-muted fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
         className,
         navigationIsOpenedOnMobile
           ? "translate-x-0 opacity-100"
@@ -185,7 +185,7 @@ const SettingsSidebarContainer = ({
           return tab.name !== "teams" ? (
             <React.Fragment key={tab.href}>
               <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
-                <div className="group flex h-9 w-64 flex-row items-center rounded-md px-2 text-sm font-medium leading-none text-gray-600 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
+                <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group flex h-9 w-64 flex-row items-center rounded-md px-2 text-sm font-medium leading-none text-gray-600">
                   {tab && tab.icon && (
                     <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                   )}
@@ -206,7 +206,7 @@ const SettingsSidebarContainer = ({
                     name={t(child.name)}
                     isExternalLink={child.isExternalLink}
                     href={child.href || "/"}
-                    textClassNames="px-3 text-gray-900 font-medium text-sm"
+                    textClassNames="px-3 text-emphasis font-medium text-sm"
                     className={`my-0.5 h-7 ${tab.children && index === tab.children?.length - 1 && "!mb-3"}`}
                     disableChevron
                   />
@@ -217,7 +217,7 @@ const SettingsSidebarContainer = ({
             <React.Fragment key={tab.href}>
               <div className={`${!tab.children?.length ? "mb-3" : ""}`}>
                 <Link href={tab.href}>
-                  <div className="group flex h-9 w-64 flex-row items-center rounded-md px-2 py-[10px] text-sm font-medium leading-none text-gray-600 hover:bg-gray-100  group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900">
+                  <div className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default group flex h-9 w-64 flex-row items-center rounded-md px-2 py-[10px] text-sm  font-medium leading-none text-gray-600">
                     {tab && tab.icon && (
                       <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                     )}
@@ -243,7 +243,7 @@ const SettingsSidebarContainer = ({
                           }>
                           <CollapsibleTrigger>
                             <div
-                              className="flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px] text-left text-sm font-medium leading-none  hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900"
+                              className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default flex h-9 w-64 flex-row items-center rounded-md px-3 py-[10px]  text-left text-sm font-medium leading-none"
                               onClick={() =>
                                 setTeamMenuState([
                                   ...teamMenuState,
@@ -274,14 +274,14 @@ const SettingsSidebarContainer = ({
                               <VerticalTabItem
                                 name={t("profile")}
                                 href={`/settings/teams/${team.id}/profile`}
-                                textClassNames="px-3 text-gray-900 font-medium text-sm"
+                                textClassNames="px-3 text-emphasis font-medium text-sm"
                                 disableChevron
                               />
                             )}
                             <VerticalTabItem
                               name={t("members")}
                               href={`/settings/teams/${team.id}/members`}
-                              textClassNames="px-3 text-gray-900 font-medium text-sm"
+                              textClassNames="px-3 text-emphasis font-medium text-sm"
                               disableChevron
                             />
                             {(team.role === MembershipRole.OWNER || team.role === MembershipRole.ADMIN) && (
@@ -290,26 +290,26 @@ const SettingsSidebarContainer = ({
                                 {/* <VerticalTabItem
                               name={t("general")}
                               href={`${WEBAPP_URL}/settings/my-account/appearance`}
-                              textClassNames="px-3 text-gray-900 font-medium text-sm"
+                              textClassNames="px-3 text-emphasis font-medium text-sm"
                               disableChevron
                             /> */}
                                 <VerticalTabItem
                                   name={t("appearance")}
                                   href={`/settings/teams/${team.id}/appearance`}
-                                  textClassNames="px-3 text-gray-900 font-medium text-sm"
+                                  textClassNames="px-3 text-emphasis font-medium text-sm"
                                   disableChevron
                                 />
                                 <VerticalTabItem
                                   name={t("billing")}
                                   href={`/settings/teams/${team.id}/billing`}
-                                  textClassNames="px-3 text-gray-900 font-medium text-sm"
+                                  textClassNames="px-3 text-emphasis font-medium text-sm"
                                   disableChevron
                                 />
                                 {HOSTED_CAL_FEATURES && (
                                   <VerticalTabItem
                                     name={t("saml_config")}
                                     href={`/settings/teams/${team.id}/sso`}
-                                    textClassNames="px-3 text-gray-900 font-medium text-sm"
+                                    textClassNames="px-3 text-emphasis font-medium text-sm"
                                     disableChevron
                                   />
                                 )}
@@ -322,7 +322,7 @@ const SettingsSidebarContainer = ({
                 <VerticalTabItem
                   name={t("add_a_team")}
                   href={`${WEBAPP_URL}/settings/teams/new`}
-                  textClassNames="px-3 items-center mt-2 text-gray-900 font-medium text-sm"
+                  textClassNames="px-3 items-center mt-2 text-emphasis font-medium text-sm"
                   icon={FiPlus}
                   disableChevron
                 />
@@ -341,17 +341,17 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
 
   return (
     <>
-      <nav className="sticky top-0 z-20 flex w-full items-center justify-between border-b border-gray-100 bg-gray-50 p-4 sm:relative lg:hidden">
+      <nav className="bg-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b sm:relative lg:hidden">
         <div className="flex items-center space-x-3 ">
           <Button StartIcon={FiMenu} color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
           </Button>
 
           <button
-            className="flex items-center space-x-2 rounded-md px-3 py-1 hover:bg-gray-200 rtl:space-x-reverse"
+            className="hover:bg-emphasis flex items-center space-x-2 rounded-md px-3 py-1 rtl:space-x-reverse"
             onClick={() => router.back()}>
-            <FiArrowLeft className="text-gray-700" />
-            <p className="font-semibold text-black">{t("settings")}</p>
+            <FiArrowLeft className="text-default" />
+            <p className="text-emphasis font-semibold">{t("settings")}</p>
           </button>
         </div>
       </nav>
@@ -435,16 +435,16 @@ function ShellHeader() {
         )}
         <div>
           {meta.title && isLocaleReady ? (
-            <h1 className="font-cal mb-1 text-xl font-bold leading-5 tracking-wide text-black">
+            <h1 className="font-cal text-emphasis mb-1 text-xl font-bold leading-5 tracking-wide">
               {t(meta.title)}
             </h1>
           ) : (
-            <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200" />
+            <div className="bg-emphasis mb-1 h-6 w-24 animate-pulse rounded-md" />
           )}
           {meta.description && isLocaleReady ? (
             <p className="text-sm text-gray-600 ltr:mr-4 rtl:ml-4">{t(meta.description)}</p>
           ) : (
-            <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200" />
+            <div className="bg-emphasis mb-1 h-6 w-32 animate-pulse rounded-md" />
           )}
         </div>
         <div className="ml-auto">{meta.CTA}</div>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 6c50c5c1b4..df5c3ff1c5 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -271,7 +271,7 @@ function UserDropdown({ small }: { small?: boolean }) {
     <Dropdown open={menuOpen}>
       <div className="ltr:sm:-ml-5 rtl:sm:-mr-5">
         <DropdownMenuTrigger asChild onClick={() => setMenuOpen((menuOpen) => !menuOpen)}>
-          <button className="radix-state-open:bg-gray-200 group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left outline-none hover:bg-gray-200 focus:outline-none focus:ring-0 sm:mx-2.5 sm:pl-3 md:rounded-none lg:rounded lg:pl-2">
+          <button className="radix-state-open:bg-emphasis hover:bg-emphasis group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left outline-none focus:outline-none focus:ring-0 sm:mx-2.5 sm:pl-3 md:rounded-none lg:rounded lg:pl-2">
             <span
               className={classNames(
                 small ? "h-6 w-6 md:ml-3" : "h-8 w-8 ltr:mr-2 rtl:ml-2",
@@ -295,7 +295,7 @@ function UserDropdown({ small }: { small?: boolean }) {
             {!small && (
               <span className="flex flex-grow items-center truncate">
                 <span className="flex-grow truncate text-sm">
-                  <span className="mb-1 block truncate font-medium leading-none text-gray-900">
+                  <span className="text-emphasis mb-1 block truncate font-medium leading-none">
                     {user.name || "Nameless User"}
                   </span>
                   <span className="block truncate font-normal leading-none text-gray-600">
@@ -307,7 +307,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                   </span>
                 </span>
                 <FiMoreVertical
-                  className="h-4 w-4 flex-shrink-0 text-gray-400 group-hover:text-gray-500 ltr:mr-2 rtl:ml-2 rtl:mr-4"
+                  className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2 rtl:mr-4"
                   aria-hidden="true"
                 />
               </span>
@@ -336,7 +336,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                         className={classNames(
                           user.away
                             ? "text-purple-500 group-hover:text-purple-700"
-                            : "text-gray-500 group-hover:text-gray-700",
+                            : "group-hover:text-default text-subtle",
                           props.className
                         )}
                         aria-hidden="true"
@@ -562,7 +562,7 @@ const Navigation = () => {
       {desktopNavigationItems.map((item) => (
         <NavigationItem key={item.name} item={item} />
       ))}
-      <div className="mt-0.5 text-gray-500 lg:hidden">
+      <div className="text-subtle mt-0.5 lg:hidden">
         <KBarTrigger />
       </div>
     </nav>
@@ -605,17 +605,17 @@ 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-gray-900",
+          "hover:bg-emphasis [&[aria-current='page']]:bg-emphasis hover:text-emphasis group flex items-center rounded-md py-2 px-3 text-sm font-medium text-gray-600",
           isChild
-            ? `[&[aria-current='page']]:text-brand-900 hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
+            ? `[&[aria-current='page']]:text-brand-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 [&[aria-current='page']]:bg-transparent ${
                 props.index === 0 ? "mt-0" : "mt-px"
               }`
-            : "[&[aria-current='page']]:text-brand-900 mt-0.5 text-sm"
+            : "[&[aria-current='page']]:text-brand-emphasis mt-0.5 text-sm"
         )}
         aria-current={current ? "page" : undefined}>
         {item.icon && (
           <item.icon
-            className="h-4 w-4 flex-shrink-0 text-gray-500 ltr:mr-2 rtl:ml-2 [&[aria-current='page']]:text-inherit"
+            className="h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2 [&[aria-current='page']]:text-inherit"
             aria-hidden="true"
             aria-current={current ? "page" : undefined}
           />
@@ -649,7 +649,7 @@ const MobileNavigation = () => {
     <>
       <nav
         className={classNames(
-          "pwa:pb-2.5 fixed bottom-0 z-30 -mx-4 flex w-full border border-t border-gray-200 bg-gray-50 bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
+          "pwa:pb-2.5 bg-muted fixed bottom-0 z-30 -mx-4 flex w-full border border-t border-gray-200 bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
           isEmbed && "hidden"
         )}>
         {mobileNavigationBottomItems.map((item) => (
@@ -678,12 +678,12 @@ const MobileNavigationItem: React.FC<{
     <Link
       key={item.name}
       href={item.href}
-      className="relative my-2 min-w-0 flex-1 overflow-hidden rounded-md !bg-transparent p-1 text-center text-xs font-medium text-gray-400 hover:text-gray-700 focus:z-10 sm:text-sm [&[aria-current='page']]:text-gray-900"
+      className="[&[aria-current='page']]:text-emphasis hover:text-default text-muted relative my-2 min-w-0 flex-1 overflow-hidden rounded-md !bg-transparent p-1 text-center text-xs font-medium focus:z-10 sm:text-sm"
       aria-current={current ? "page" : undefined}>
       {item.badge && <div className="absolute right-1 top-1">{item.badge}</div>}
       {item.icon && (
         <item.icon
-          className="mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center text-inherit [&[aria-current='page']]:text-gray-900"
+          className="[&[aria-current='page']]:text-emphasis  mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center text-inherit"
           aria-hidden="true"
           aria-current={current ? "page" : undefined}
         />
@@ -705,12 +705,12 @@ const MobileNavigationMoreItem: React.FC<{
 
   return (
     <li className="border-b last:border-b-0" key={item.name}>
-      <Link href={item.href} className="flex items-center justify-between p-5 hover:bg-gray-100">
-        <span className="flex items-center font-semibold text-gray-700 ">
+      <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5">
+        <span className="text-default flex items-center font-semibold ">
           {item.icon && <item.icon className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />}
           {isLocaleReady ? t(item.name) : <SkeletonText />}
         </span>
-        <FiArrowRight className="h-5 w-5 text-gray-500" />
+        <FiArrowRight className="text-subtle h-5 w-5" />
       </Link>
     </li>
   );
@@ -731,7 +731,7 @@ function SideBarContainer() {
 function SideBar() {
   return (
     <div className="relative">
-      <aside className="desktop-transparent top-0 hidden h-full max-h-screen w-14 flex-col overflow-y-auto overflow-x-hidden border-r border-gray-100 bg-gray-50 md:sticky md:flex lg:w-56 lg:px-4">
+      <aside className="desktop-transparent bg-mutedd:sticky border-muted top-0 hidden h-full max-h-screen w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:flex lg:w-56 lg:px-4">
         <div className="flex h-full flex-col justify-between py-3 lg:pt-6 ">
           <header className="items-center justify-between md:hidden lg:flex">
             <Link href="/event-types" className="px-2">
@@ -741,14 +741,14 @@ function SideBar() {
               <button
                 color="minimal"
                 onClick={() => window.history.back()}
-                className="desktop-only group flex text-sm font-medium text-gray-500 hover:text-gray-900">
-                <FiArrowLeft className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
+                className="desktop-only hover:text-emphasis text-subtle group flex text-sm font-medium">
+                <FiArrowLeft className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
               </button>
               <button
                 color="minimal"
                 onClick={() => window.history.forward()}
-                className="desktop-only group flex text-sm font-medium text-gray-500 hover:text-gray-900">
-                <FiArrowRight className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
+                className="desktop-only hover:text-emphasis text-subtle group flex text-sm font-medium">
+                <FiArrowRight className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
               </button>
               <KBarTrigger />
             </div>
@@ -812,14 +812,14 @@ export function ShellMain(props: LayoutProps) {
               {props.heading && (
                 <h3
                   className={classNames(
-                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 hidden truncate text-xl font-semibold tracking-wide text-black md:block xl:max-w-full",
+                    "font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis hidden truncate text-xl font-semibold tracking-wide md:block xl:max-w-full",
                     props.smallHeading ? "text-base" : "text-xl"
                   )}>
                   {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
                 </h3>
               )}
               {props.subtitle && (
-                <p className="hidden text-sm text-gray-500 md:block">
+                <p className="text-subtle hidden text-sm md:block">
                   {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
                 </p>
               )}
@@ -852,7 +852,7 @@ function MainContainer({
   ...props
 }: LayoutProps) {
   return (
-    <main className="relative z-0 flex-1 bg-white focus:outline-none">
+    <main className="bg-default relative z-0 flex-1 focus:outline-none">
       {/* show top navigation for md and smaller (tablet and phones) */}
       {TopNavContainerProp}
       <div className="max-w-full py-4 px-4 md:py-8 lg:px-12">
@@ -879,18 +879,18 @@ function TopNav() {
     <>
       <nav
         style={isEmbed ? { display: "none" } : {}}
-        className="sticky top-0 z-40 flex w-full items-center justify-between border-b border-gray-200 bg-gray-50 bg-opacity-50 py-1.5 px-4 backdrop-blur-lg sm:p-4 md:hidden">
+        className="bg-mutedg-opacity-50 sticky top-0 z-40 flex w-full items-center justify-between border-b border-gray-200 py-1.5 px-4 backdrop-blur-lg sm:p-4 md:hidden">
         <Link href="/event-types">
           <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-gray-900 lg:hidden">
+          <span className="hover:bg-mutedover:text-emphasis text-default group flex items-center rounded-full text-sm font-medium 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">
+          <button className="hover:bg-mutedover:text-subtle text-muted rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
             <span className="sr-only">{t("settings")}</span>
             <Link href="/settings/my-account/profile">
-              <FiSettings className="h-4 w-4 text-gray-700" aria-hidden="true" />
+              <FiSettings className="text-default h-4 w-4" aria-hidden="true" />
             </Link>
           </button>
           <UserDropdown small />
diff --git a/packages/features/tips/UpgradeTip.tsx b/packages/features/tips/UpgradeTip.tsx
index 55be04ed37..9107c92a6c 100644
--- a/packages/features/tips/UpgradeTip.tsx
+++ b/packages/features/tips/UpgradeTip.tsx
@@ -60,8 +60,8 @@ export function UpgradeTip({
             backgroundRepeat: "no-repeat",
           }}>
           <div className="mt-3 px-8 sm:px-14">
-            <h1 className={classNames("font-cal text-3xl", dark && "text-white")}>{t(title)}</h1>
-            <p className={classNames("my-4 max-w-sm", dark ? "text-white" : "text-gray-600")}>
+            <h1 className={classNames("font-cal text-3xl", dark && "text-inverted")}>{t(title)}</h1>
+            <p className={classNames("my-4 max-w-sm", dark ? "text-inverted" : "text-gray-600")}>
               {t(description)}
             </p>
             {buttons}
@@ -70,10 +70,10 @@ export function UpgradeTip({
 
         <div className="mt-4 grid-cols-3 md:grid md:gap-4">
           {features.map((feature) => (
-            <div key={feature.title} className="mb-4 min-h-[180px] w-full rounded-md bg-gray-50 p-8 md:mb-0">
+            <div key={feature.title} className="bg-muted mb-4 min-h-[180px] w-full rounded-md p-8 md:mb-0">
               {feature.icon}
               <h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
-              <p className="text-gray-700">{feature.description}</p>
+              <p className="text-default">{feature.description}</p>
             </div>
           ))}
         </div>
diff --git a/packages/features/users/components/UserV2OptInBanner.tsx b/packages/features/users/components/UserV2OptInBanner.tsx
index 871afb6cab..7658574443 100644
--- a/packages/features/users/components/UserV2OptInBanner.tsx
+++ b/packages/features/users/components/UserV2OptInBanner.tsx
@@ -8,7 +8,7 @@ function UserV2OptInBanner() {
 
   if (hasV2OptInCookie)
     return (
-      <p className="text-xs text-gray-400">
+      <p className="text-muted text-xs">
         You&apos;re using the new version of {APP_NAME}.{" "}
         <a href="/api/v2-opt-in" className="text-blue-400 underline">
           Go back
@@ -18,7 +18,7 @@ function UserV2OptInBanner() {
     );
 
   return (
-    <p className="text-xs text-gray-400">
+    <p className="text-muted text-xs">
       Want to try the new version of {APP_NAME}?{" "}
       <a href="/api/v2-opt-in" className="text-blue-400 underline">
         Opt-in to our v2.0 beta
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index 4ed8f5754b..9eabf20727 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { Button, Form, Label, Select, Switch, TextArea, TextField, ToggleGroup } from "@calcom/ui";
 
 import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
@@ -94,7 +94,7 @@ const WebhookForm = (props: {
               <TextField
                 name="subscriberUrl"
                 label={t("subscriber_url")}
-                labelClassName="font-medium text-gray-900 font-sm"
+                labelClassName="font-medium text-emphasis font-sm"
                 value={value}
                 required
                 type="url"
@@ -113,7 +113,7 @@ const WebhookForm = (props: {
           name="active"
           control={formMethods.control}
           render={({ field: { value } }) => (
-            <div className="font-sm mt-8 font-medium text-gray-900">
+            <div className="font-sm text-emphasis mt-8 font-medium">
               <Switch
                 label={t("enable_webhook")}
                 checked={value}
@@ -132,7 +132,7 @@ const WebhookForm = (props: {
             const selectValue = translatedTriggerOptions.filter((option) => value.includes(option.value));
             return (
               <div className="mt-8">
-                <Label className="font-sm mt-8 font-medium text-gray-900">
+                <Label className="font-sm text-emphasis mt-8 font-medium">
                   <>{t("event_triggers")}</>
                 </Label>
                 <Select
@@ -154,9 +154,9 @@ const WebhookForm = (props: {
             <div className="mt-8 ">
               {!!hasSecretKey && !changeSecret && (
                 <>
-                  <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-gray-900">
+                  <Label className="font-sm text-emphasis font-medium">Secret</Label>
+                  <div className="bg-default space-y-0 rounded-md border-0 border-neutral-200 sm:mx-0 md:border">
+                    <div className="text-emphasis rounded-sm border-b p-2 text-sm">
                       {t("forgotten_secret_description")}
                     </div>
                     <div className="p-2">
@@ -177,7 +177,7 @@ const WebhookForm = (props: {
                   <TextField
                     autoComplete="off"
                     label={t("secret")}
-                    labelClassName="font-medium text-gray-900 font-sm"
+                    labelClassName="font-medium text-emphasis font-sm"
                     {...formMethods.register("secret")}
                     value={newSecret}
                     onChange={(event) => setNewSecret(event.currentTarget.value)}
@@ -199,7 +199,7 @@ const WebhookForm = (props: {
                 <TextField
                   name="secret"
                   label={t("secret")}
-                  labelClassName="font-medium text-gray-900 font-sm"
+                  labelClassName="font-medium text-emphasis font-sm"
                   value={value}
                   onChange={(e) => {
                     formMethods.setValue("secret", e?.target.value);
@@ -215,7 +215,7 @@ const WebhookForm = (props: {
           control={formMethods.control}
           render={({ field: { value } }) => (
             <>
-              <Label className="font-sm mt-8 text-gray-900">
+              <Label className="font-sm text-emphasis mt-8">
                 <>{t("payload_template")}</>
               </Label>
               <div className="mb-2">
@@ -249,7 +249,7 @@ const WebhookForm = (props: {
             </>
           )}
         />
-        <div className="mt-8 rounded-md bg-gray-100 p-6">
+        <div className="bg-subtle mt-8 rounded-md p-6">
           <WebhookTestDisclosure />
         </div>
 
diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx
index e613f7256b..36986fdfca 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -1,4 +1,4 @@
-import { WebhookTriggerEvents } from "@prisma/client";
+import type { WebhookTriggerEvents } from "@prisma/client";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -42,7 +42,7 @@ export default function WebhookListItem(props: {
   return (
     <div className={classNames("flex w-full justify-between p-4", props.lastItem ? "" : "border-b")}>
       <div>
-        <p className="text-sm font-medium text-gray-900">{webhook.subscriberUrl}</p>
+        <p className="text-emphasis text-sm font-medium">{webhook.subscriberUrl}</p>
         <Tooltip content={t("triggers_when")}>
           <div className="mt-2.5 w-4/5">
             {webhook.eventTriggers.map((trigger) => (
diff --git a/packages/features/webhooks/components/WebhookListItemSkeleton.tsx b/packages/features/webhooks/components/WebhookListItemSkeleton.tsx
index 3af3678003..b8ab0e73aa 100644
--- a/packages/features/webhooks/components/WebhookListItemSkeleton.tsx
+++ b/packages/features/webhooks/components/WebhookListItemSkeleton.tsx
@@ -4,7 +4,7 @@ export default function WebhookListItemSkeleton() {
   return (
     <div className="flex w-full justify-between p-4">
       <div>
-        <p className="text-sm font-medium text-gray-900">
+        <p className="text-emphasis text-sm font-medium">
           <SkeletonText className="h-4 w-56" />
         </p>
         <div className="mt-2.5 w-max">
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index 62bbbe3e33..f3904fe908 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -42,10 +42,10 @@ export default function WebhookTestDisclosure() {
             )}
           </div>
         </div>
-        <div className="rounded-b-md bg-black p-4 font-mono text-[13px] leading-4 text-white">
+        <div className="text-inverted rounded-b-md bg-black p-4 font-mono text-[13px] leading-4">
           {!mutation.data && <p>{t("no_data_yet")}</p>}
           {mutation.status === "success" && (
-            <div className="overflow-x-auto text-white">{JSON.stringify(mutation.data, null, 4)}</div>
+            <div className="text-inverted overflow-x-auto">{JSON.stringify(mutation.data, null, 4)}</div>
           )}
         </div>
       </div>
diff --git a/packages/lib/OgImages.tsx b/packages/lib/OgImages.tsx
index 6c2ee594cd..7f0788345a 100644
--- a/packages/lib/OgImages.tsx
+++ b/packages/lib/OgImages.tsx
@@ -134,7 +134,7 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
       <div tw="h-full flex flex-col justify-start">
         <div tw="flex items-center justify-center" style={{ fontFamily: "cal", fontWeight: 300 }}>
           <img src={`${CAL_URL}/${LOGO}`} width="350" alt="Logo" />
-          {avatars.length > 0 && <div tw="font-bold text-black text-[92px] mx-8 bottom-2">/</div>}
+          {avatars.length > 0 && <div tw="font-bold text-emphasis text-[92px] mx-8 bottom-2">/</div>}
           <div tw="flex flex-row">
             {avatars.slice(0, 3).map((avatar) => (
               <img
@@ -146,13 +146,13 @@ export const Meeting = ({ title, users = [], profile }: MeetingImageProps) => {
               />
             ))}
             {avatars.length > 3 && (
-              <div tw="flex items-center justify-center w-[160px] h-[160px] rounded-full bg-black text-white text-[54px] font-bold">
+              <div tw="flex items-center justify-center w-[160px] h-[160px] rounded-full bg-black text-inverted text-[54px] font-bold">
                 <span tw="flex top-[-5px] left-[-5px]">+{avatars.length - 3}</span>
               </div>
             )}
           </div>
         </div>
-        <div tw="relative flex text-[54px] w-full flex-col text-black mt-auto">
+        <div tw="relative flex text-[54px] w-full flex-col text-emphasis mt-auto">
           <div
             tw="flex w-[1040px] overflow-hidden"
             style={{ whiteSpace: "nowrap", fontFamily: "cal", textOverflow: "ellipsis" }}>
@@ -212,7 +212,7 @@ export const App = ({ name, description, slug }: AppImageProps) => (
         <img src={`${CAL_URL}${slug}`} alt="App icon" width="172" />
       </div>
     </div>
-    <div tw="flex mt-auto w-full flex-col text-black">
+    <div tw="flex mt-auto w-full flex-col text-emphasis">
       <div tw="flex text-[64px] mb-7" style={{ fontFamily: "cal", fontWeight: 600 }}>
         {name}
       </div>
@@ -230,7 +230,7 @@ export const Generic = ({ title, description }: GenericImageProps) => (
         <img src={`${CAL_URL}/cal-logo-word-black.svg`} width="350" alt="Logo" />
       </div>
 
-      <div tw="relative flex text-[54px] w-full flex-col text-black mt-auto">
+      <div tw="relative flex text-[54px] w-full flex-col text-emphasis mt-auto">
         <div tw="flex w-[1040px]" style={{ fontFamily: "cal" }}>
           {title}
         </div>
diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 699262be54..778ab750ee 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -26,8 +26,8 @@ export function Alert(props: AlertProps) {
         severity === "error" && "border-red-900 bg-red-50 text-red-800",
         severity === "warning" && "border-yellow-700 bg-yellow-50 text-yellow-700",
         severity === "info" && "border-sky-700 bg-sky-50 text-sky-700",
-        severity === "success" && "bg-gray-900 text-white",
-        severity === "neutral" && "border-none bg-gray-100"
+        severity === "success" && "bg-inverted text-inverted",
+        severity === "neutral" && "bg-subtle border-none"
       )}>
       <div className="relative flex flex-col md:flex-row">
         <div className="flex-shrink-0">
@@ -50,10 +50,7 @@ export function Alert(props: AlertProps) {
             <FiInfo className={classNames("h-5 w-5 text-gray-800", iconClassName)} aria-hidden="true" />
           )}
           {severity === "success" && (
-            <CheckCircleIcon
-              className={classNames("h-5 w-5 text-gray-400", iconClassName)}
-              aria-hidden="true"
-            />
+            <CheckCircleIcon className={classNames("text-muted h-5 w-5", iconClassName)} aria-hidden="true" />
           )}
         </div>
         <div className="ml-3 flex-grow">
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index 0f44c696cb..98ab016981 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -67,7 +67,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
   };
   return (
     <div className="relative mb-4 flex flex-col justify-between lg:flex-row lg:items-center">
-      <h2 className="hidden text-base font-semibold leading-none text-gray-900 sm:block">
+      <h2 className="text-emphasis hidden text-base font-semibold leading-none sm:block">
         {searchText
           ? t("search")
           : t("explore_apps", {
@@ -78,8 +78,8 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
       </h2>
       {leftVisible && (
         <button onClick={handleLeft} className="absolute bottom-0 flex md:left-1/2 md:-top-1">
-          <div className="flex h-10 w-5 items-center justify-end bg-white">
-            <FiChevronLeft className="h-4 w-4 text-gray-500" />
+          <div className="bg-default flex h-10 w-5 items-center justify-end">
+            <FiChevronLeft className="text-subtle h-4 w-4" />
           </div>
           <div className="flex h-10 w-5 bg-gradient-to-l from-transparent to-white" />
         </button>
@@ -93,8 +93,8 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
             router.replace(router.asPath.split("?")[0], undefined, { shallow: true });
           }}
           className={classNames(
-            selectedCategory === null ? "bg-gray-900 text-gray-50" : "bg-gray-50 text-gray-900",
-            "rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:bg-gray-900 hover:text-gray-50"
+            selectedCategory === null ? "bg-inverted text-gray-50" : "bg-muted text-emphasis",
+            "hover:bg-inverted rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
           )}>
           {t("all_apps")}
         </li>
@@ -111,8 +111,8 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
               }
             }}
             className={classNames(
-              selectedCategory === cat ? "bg-gray-900 text-gray-50" : "bg-gray-50 text-gray-900",
-              "rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:bg-gray-900 hover:text-gray-50"
+              selectedCategory === cat ? "bg-inverted text-gray-50" : "bg-mutedext-gray-900",
+              "hover:bg-inverted rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
             )}>
             {cat[0].toUpperCase() + cat.slice(1)}
           </li>
@@ -121,8 +121,8 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
       {rightVisible && (
         <button onClick={handleRight} className="absolute bottom-0 right-0 flex md:-top-1">
           <div className="flex h-10 w-5 bg-gradient-to-r from-transparent to-white" />
-          <div className="flex h-10 w-5 items-center justify-end bg-white">
-            <FiChevronRight className="h-4 w-4 text-gray-500" />
+          <div className="bg-default flex h-10 w-5 items-center justify-end">
+            <FiChevronRight className="text-subtle h-4 w-4" />
           </div>
         </button>
       )}
diff --git a/packages/ui/components/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx
index d35f5201b2..a3ca9c0085 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -62,10 +62,10 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
       </div>
       {/* TODO: add reviews <div className="flex text-sm text-gray-800">
           <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
-          <span className="pl-1 text-gray-500">{props.reviews} reviews</span>
+          <span className="pl-1 text-subtle">{props.reviews} reviews</span>
         </div> */}
       <p
-        className="mt-2 flex-grow text-sm text-gray-500"
+        className="text-subtle mt-2 flex-grow text-sm"
         style={{
           overflow: "hidden",
           display: "-webkit-box",
@@ -144,16 +144,16 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
       </div>
       <div className="max-w-44 absolute right-0 mr-4 flex flex-wrap justify-end gap-1">
         {appAdded > 0 && (
-          <span className="rounded-md bg-green-100 px-2 py-1 text-sm font-normal text-green-800">
+          <span className="bg-success rounded-md px-2 py-1 text-sm font-normal text-green-800">
             {t("installed", { count: appAdded })}
           </span>
         )}
         {app.isTemplate && (
-          <span className="rounded-md bg-red-100 px-2 py-1 text-sm font-normal text-red-800">Template</span>
+          <span className="bg-error rounded-md px-2 py-1 text-sm font-normal text-red-800">Template</span>
         )}
 
         {(app.isDefault || (!app.isDefault && app.isGlobal)) && (
-          <span className="flex items-center rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
+          <span className="bg-subtle flex items-center rounded-md px-2 py-1 text-sm font-normal text-gray-800">
             {t("default")}
           </span>
         )}
diff --git a/packages/ui/components/apps/Categories.tsx b/packages/ui/components/apps/Categories.tsx
index 84cd033cf0..6f903744d2 100644
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@@ -42,7 +42,7 @@ export function AppStoreCategories({
               ) : (
                 <SkeletonText invisible />
               )}
-              <p className="pt-2 text-sm font-medium text-gray-500">
+              <p className="text-subtle pt-2 text-sm font-medium">
                 {isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
                 <FiArrowRight className="inline-block h-4 w-4" />
               </p>
diff --git a/packages/ui/components/apps/SkeletonLoader.tsx b/packages/ui/components/apps/SkeletonLoader.tsx
index fc194228e8..92595fb284 100644
--- a/packages/ui/components/apps/SkeletonLoader.tsx
+++ b/packages/ui/components/apps/SkeletonLoader.tsx
@@ -13,10 +13,10 @@ export function SkeletonLoader({
 }) {
   return (
     <>
-      <ShellSubHeading title={<div className="h-6 w-32 bg-gray-100" />} {...{ className }} />
+      <ShellSubHeading title={<div className="bg-subtle h-6 w-32" />} {...{ className }} />
       {title && description && <Meta title={title} description={description} />}
 
-      <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="bg-default -mx-4 animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
diff --git a/packages/ui/components/apps/Slider.tsx b/packages/ui/components/apps/Slider.tsx
index 582fd3828d..4cebfad1da 100644
--- a/packages/ui/components/apps/Slider.tsx
+++ b/packages/ui/components/apps/Slider.tsx
@@ -13,7 +13,7 @@ import { SkeletonText } from "../skeleton";
 const SliderButton: FC<ComponentProps<"button">> = (props) => {
   const { children, ...rest } = props;
   return (
-    <button className="rounded p-2.5 text-gray-700 hover:bg-gray-100" {...rest}>
+    <button className="hover:bg-subtle text-default rounded p-2.5" {...rest}>
       {children}
     </button>
   );
@@ -55,7 +55,7 @@ export const Slider = <T extends string | unknown>({
           {isLocaleReady ? (
             title && (
               <div>
-                <h2 className="mt-0 text-base font-semibold leading-none text-gray-900">{title}</h2>
+                <h2 className="text-emphasis mt-0 text-base font-semibold leading-none">{title}</h2>
               </div>
             )
           ) : (
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
index d5f127b66c..f9e4727da6 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -58,7 +58,7 @@ export function Avatar(props: AvatarProps) {
         {props.accepted && (
           <div
             className={classNames(
-              "absolute bottom-0 right-0 block rounded-full bg-green-400 text-white ring-2 ring-white",
+              "text-inverted absolute bottom-0 right-0 block rounded-full bg-green-400 ring-2 ring-white",
               size === "lg" ? "h-5 w-5" : "h-2 w-2"
             )}>
             <div className="flex h-full items-center justify-center p-[2px]">
@@ -78,7 +78,7 @@ export function Avatar(props: AvatarProps) {
     <Tooltip.Provider>
       <Tooltip.Tooltip delayDuration={300}>
         <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-        <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white shadow-sm">
+        <Tooltip.Content className="text-inverted rounded-sm bg-black p-2 text-sm shadow-sm">
           <Tooltip.Arrow />
           {title}
         </Tooltip.Content>
diff --git a/packages/ui/components/avatar/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx
index b32d3a40ff..0b7a1ab2f1 100644
--- a/packages/ui/components/avatar/AvatarGroup.tsx
+++ b/packages/ui/components/avatar/AvatarGroup.tsx
@@ -48,7 +48,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
           )}>
           <span
             className={classNames(
-              "m-auto px-1 text-center text-white",
+              "text-inverted m-auto px-1 text-center",
               props.size === "sm" ? "text-[12px]" : "text-2xl"
             )}>
             +{numTruncatedAvatars}
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index 91e220cb25..2d1fe27629 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -4,15 +4,15 @@ import classNames from "@calcom/lib/classNames";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 
 const badgeClassNameByVariant = {
-  default: "bg-orange-100 text-orange-800",
-  warning: "bg-orange-100 text-orange-800",
-  orange: "bg-orange-100 text-orange-800",
-  success: "bg-green-100 text-green-800",
-  green: "bg-green-100 text-green-800",
-  gray: "bg-gray-100 text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800 group-hover:bg-gray-200 dark:group-hover:bg-darkgray-300",
-  blue: "bg-blue-100 text-blue-800",
-  red: "bg-red-100 text-red-800",
-  error: "bg-red-100 text-red-800",
+  default: "bg-attention text-orange-800",
+  warning: "bg-attention text-orange-800",
+  orange: "bg-attention text-orange-800",
+  success: "bg-success text-green-800",
+  green: "bg-success text-green-800",
+  gray: "bg-subtle text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800 group-hover:bg-emphasis dark:group-hover:bg-darkgray-300",
+  blue: "bg-info text-blue-800",
+  red: "bg-error text-red-800",
+  error: "bg-error text-red-800",
 };
 
 const classNameBySize = {
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 570ccf3d38..f899879245 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -45,9 +45,9 @@ const buttonClasses = cva(
         fab: "rounded-full justify-center md:rounded-md radix-state-open:rotate-45 md:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
       },
       color: {
-        primary: "text-white dark:text-black",
-        secondary: "text-gray-900 dark:text-darkgray-900",
-        minimal: "text-gray-900 dark:text-darkgray-900",
+        primary: "text-inverted dark:text-emphasis",
+        secondary: "text-emphasis dark:text-darkgray-900",
+        minimal: "text-emphasis dark:text-darkgray-900",
         destructive: "",
       },
       size: {
@@ -72,70 +72,70 @@ const buttonClasses = cva(
       {
         loading: true,
         color: "primary",
-        className: "bg-gray-800/30 text-white/30 dark:bg-opacity-30 dark:bg-darkgray-700 dark:text-black/30",
+        className:
+          "bg-gray-800/30 text-inverted/30 dark:bg-opacity-30 dark:bg-darkgray-700 dark:text-emphasis/30",
       },
       ...applyStyleToMultipleVariants({
         disabled: [undefined, false],
         color: "primary",
         className:
-          "bg-brand-500 hover:bg-brand-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-500 dark:hover:bg-darkgray-600 dark:bg-darkgray-900",
+          "bg-brand-default hover:bg-brand-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-500 dark:hover:bg-darkgray-600 dark:bg-darkgray-900",
       }),
       // Secondary variants
       {
         disabled: true,
         color: "secondary",
         className:
-          "border border-gray-200 bg-opacity-30 text-gray-900/30 dark:text-darkgray-900/30 dark:border-darkgray-200",
+          "border border-gray-200 bg-opacity-30 text-emphasis/30 dark:text-darkgray-900/30 dark:border-darkgray-200",
       },
       {
         loading: true,
         color: "secondary",
         className:
-          "bg-gray-100 text-gray-900/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
+          "bg-subtle text-emphasis/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
       },
       ...applyStyleToMultipleVariants({
         disabled: [undefined, false],
         color: "secondary",
         className:
-          "border border-gray-300 dark:border-darkgray-300 bg-white dark:bg-darkgray-100 hover:bg-gray-50 hover:border-gray-400 focus-visible:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
+          "border border-default dark:border-darkgray-300 bg-default dark:bg-darkgray-100 hover:bg-muted hover:border-emphasis focus-visible:bg-subtle dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
       }),
       // Minimal variants
       {
         disabled: true,
         color: "minimal",
         className:
-          "border:gray-200 bg-opacity-30 text-gray-900/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
+          "border:gray-200 bg-opacity-30 text-emphasis/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
       },
       {
         loading: true,
         color: "minimal",
         className:
-          "bg-gray-100 text-gray-900/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
+          "bg-subtle text-emphasis/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
       },
       ...applyStyleToMultipleVariants({
         disabled: [undefined, false],
         color: "minimal",
         className:
-          "hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
+          "hover:bg-subtle focus-visible:bg-subtle dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
       }),
       // Destructive variants
       {
         disabled: true,
         color: "destructive",
-        className:
-          "text-red-700/30 dark:text-red-700/30 bg-red-100/40 dark:bg-red-100/80 border border-red-200",
+        className: "text-red-700/30 dark:text-red-700/30 bg-error/40 dark:bg-error/80 border border-red-200",
       },
       {
         loading: true,
         color: "destructive",
         className:
-          "text-red-700/30 dark:text-red-700/30 hover:text-red-700/30 bg-red-100 border border-red-200",
+          "text-red-700/30 dark:text-red-700/30 hover:text-red-700/30 bg-error border border-red-200",
       },
       ...applyStyleToMultipleVariants({
         disabled: [false, undefined],
         color: "destructive",
         className:
-          "border dark:text-white text-gray-900 hover:text-red-700 focus-visible:text-red-700 dark:hover:text-red-700 dark:focus-visible:text-red-700 hover:border-red-100 focus-visible:border-red-100 hover:bg-red-100  focus-visible:bg-red-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700",
+          "border dark:text-inverted text-emphasis hover:text-red-700 focus-visible:text-red-700 dark:hover:text-red-700 dark:focus-visible:text-red-700 hover:border-red-100 focus-visible:border-red-100 hover:bg-error  focus-visible:bg-error focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700",
       }),
       // https://github.com/joe-bell/cva/issues/95 created an issue about using !p-2 on the icon variants as i would expect this to take priority
       {
@@ -225,7 +225,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           <svg
             className={classNames(
               "mx-4 h-5 w-5 animate-spin",
-              color === "primary" ? "text-white dark:text-black" : "text-black dark:text-white"
+              color === "primary" ? "text-inverted dark:text-emphasis" : "dark:text-inverted text-emphasis"
             )}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
diff --git a/packages/ui/components/button/LinkIconButton.tsx b/packages/ui/components/button/LinkIconButton.tsx
index f43f6027e2..a3de530a4b 100644
--- a/packages/ui/components/button/LinkIconButton.tsx
+++ b/packages/ui/components/button/LinkIconButton.tsx
@@ -12,8 +12,8 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
       <button
         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-gray-500 ltr:mr-2 rtl:ml-2" />
+        className="text-md hover:bg-emphasis hover:text-emphasis text-default flex items-center rounded-md px-2 py-1 text-sm font-medium">
+        <props.Icon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index 6b4a08e634..9ce90739b1 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -36,13 +36,13 @@ const cardTypeByVariant = {
     image: "w-10 h-auto",
     card: "p-5",
     title: "text-base mt-4",
-    description: "text-sm leading-[18px] text-gray-500 font-normal",
+    description: "text-sm leading-[18px] text-subtle font-normal",
   },
   ProfileCard: {
     image: "w-9 h-auto rounded-full mb-4s",
-    card: "w-80 p-4 hover:bg-gray-100",
+    card: "w-80 p-4 hover:bg-subtle",
     title: "text-base",
-    description: "text-sm leading-[18px] text-gray-500 font-normal",
+    description: "text-sm leading-[18px] text-subtle font-normal",
   },
   SidebarCard: {
     image: "w-9 h-auto rounded-full mb-4s",
@@ -70,7 +70,7 @@ export function Card({
       className={classNames(
         containerProps?.className,
         cardTypeByVariant[variant].card,
-        "flex flex-col justify-between rounded-md border border-gray-200 bg-white"
+        "bg-default flex flex-col justify-between rounded-md border border-gray-200"
       )}
       {...containerProps}>
       <div>
@@ -88,7 +88,7 @@ export function Card({
           title={title}
           className={classNames(
             cardTypeByVariant[variant].title,
-            "line-clamp-1 font-bold leading-5 text-gray-900"
+            "line-clamp-1 text-emphasis font-bold leading-5"
           )}>
           {title}
         </h5>
@@ -109,7 +109,7 @@ export function Card({
           className="group relative my-3 flex aspect-video items-center overflow-hidden rounded">
           <div className="absolute inset-0 bg-black bg-opacity-50 transition-opacity group-hover:bg-opacity-40" />
           <svg
-            className="absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full text-white shadow-lg hover:-mt-px"
+            className="text-inverted absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg hover:-mt-px"
             viewBox="0 0 32 32"
             fill="none"
             xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index adf63c252e..291aa4b81a 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -37,7 +37,7 @@ export default function FormCard({
         {moveUp?.check() ? (
           <button
             type="button"
-            className="invisible absolute left-0 -ml-[13px] -mt-10 flex h-6 w-6 scale-0 items-center justify-center rounded-md border   bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black  hover:shadow group-hover:visible group-hover:scale-100 "
+            className="bg-default text-muted hover:text-emphasis invisible absolute left-0 -ml-[13px] -mt-10 flex h-6 w-6 scale-0 items-center   justify-center rounded-md border p-1 transition-all hover:border-transparent  hover:shadow group-hover:visible group-hover:scale-100 "
             onClick={() => moveUp?.fn()}>
             <FiArrowUp />
           </button>
@@ -45,7 +45,7 @@ export default function FormCard({
         {moveDown?.check() ? (
           <button
             type="button"
-            className="invisible absolute left-0 -ml-[13px] -mt-2 flex h-6 w-6  scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100"
+            className="bg-default text-muted hover:text-emphasis invisible absolute left-0 -ml-[13px] -mt-2  flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100"
             onClick={() => moveDown?.fn()}>
             <FiArrowDown />
           </button>
@@ -68,7 +68,7 @@ export default function FormCard({
                 deleteField?.fn();
               }}
               color="secondary">
-              <FiTrash className="h-4 w-4 text-gray-400" />
+              <FiTrash className="text-muted h-4 w-4" />
             </button>
           ) : null}
         </div>
diff --git a/packages/ui/components/card/StepCard.tsx b/packages/ui/components/card/StepCard.tsx
index de5904cf17..8c7de0fc13 100644
--- a/packages/ui/components/card/StepCard.tsx
+++ b/packages/ui/components/card/StepCard.tsx
@@ -1,6 +1,6 @@
 const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
   return (
-    <div className="mt-10 rounded-md border border-gray-200 bg-white p-4 dark:bg-black sm:p-8">
+    <div className="mt-10 rounded-md border border-gray-200 bg-default p-4 dark:bg-black sm:p-8">
       {props.children}
     </div>
   );
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index a2ed4fa08b..f7e6c49f81 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -40,25 +40,25 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
         {variety && (
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
-              <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
+              <div className="bg-error mx-auto rounded-full p-2 text-center">
                 <FiAlertCircle className="h-5 w-5 text-red-600" />
               </div>
             )}
             {variety === "warning" && (
-              <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
+              <div className="bg-attention mx-auto rounded-full p-2 text-center">
                 <FiAlertCircle className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
-              <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
+              <div className="bg-success mx-auto rounded-full p-2 text-center">
                 <FiCheck className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>
         )}
         <div>
-          <DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
-          <DialogPrimitive.Description className="text-sm text-gray-500">
+          <DialogPrimitive.Title className="font-cal text-emphasis text-xl">{title}</DialogPrimitive.Title>
+          <DialogPrimitive.Description className="text-subtle text-sm">
             {children}
           </DialogPrimitive.Description>
         </div>
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 10c7dad649..f73c1af327 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -73,11 +73,11 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
   ({ children, title, Icon, enableOverflow, type = "creation", ...props }, forwardedRef) => {
     return (
       <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-50 bg-gray-500 bg-opacity-80 transition-opacity" />
+        <DialogPrimitive.Overlay className="fadeIn bg-muted0 fixed inset-0 z-50 bg-opacity-80 transition-opacity" />
         <DialogPrimitive.Content
           {...props}
           className={classNames(
-            "fadeIn fixed left-1/2 top-1/2 z-50 min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
+            "fadeIn bg-default fixed left-1/2 top-1/2 z-50 min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded text-left shadow-xl focus-visible:outline-none sm:w-full sm:align-middle",
             props.size == "xl"
               ? "p-8 sm:max-w-[90rem]"
               : props.size == "lg"
@@ -100,7 +100,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
             <div className="flex">
               {Icon && (
                 <div className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300">
-                  <Icon className="h-4 w-4 text-black" />
+                  <Icon className="text-emphasis h-4 w-4" />
                 </div>
               )}
               <div className="w-full">
@@ -125,10 +125,10 @@ export function DialogHeader(props: DialogHeaderProps) {
 
   return (
     <div className="mb-4">
-      <h3 className="leading-20 text-semibold font-cal pb-1 text-xl text-gray-900" id="modal-title">
+      <h3 className="leading-20 text-semibold font-cal text-emphasis pb-1 text-xl" id="modal-title">
         {props.title}
       </h3>
-      {props.subtitle && <div className="text-sm text-gray-500">{props.subtitle}</div>}
+      {props.subtitle && <div className="text-subtle text-sm">{props.subtitle}</div>}
     </div>
   );
 }
diff --git a/packages/ui/components/divider/divider.stories.mdx b/packages/ui/components/divider/divider.stories.mdx
index c8672ed025..ee2f9ee062 100644
--- a/packages/ui/components/divider/divider.stories.mdx
+++ b/packages/ui/components/divider/divider.stories.mdx
@@ -14,14 +14,14 @@ Shows the current copy right as well as app version name.
     name="Divider">
     <VariantsTable titles={[]} columnMinWidth={150}>
       <VariantRow variant="Horizontal">
-        <div className="dark:text-white">
+        <div className="dark:text-inverted">
           Text above
           <Divider />
           Text below
         </div>
       </VariantRow>
       <VariantRow variant="Vertical">
-        <div className="flex dark:text-white">
+        <div className="flex dark:text-inverted">
           Text left
           <VerticalDivider />
           Text right
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index 783ced3bba..914894ba66 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -14,7 +14,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
 
   return (
     <Dropdown>
-      <DropdownMenuTrigger className="pt-[6px] focus:bg-gray-50">
+      <DropdownMenuTrigger className="focus:bg-muted pt-[6px]">
         <div className="items-center ">
           {props.isTextEditor ? (
             <>
@@ -34,7 +34,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="h-40 overflow-scroll">
         <div className="pt-4 pb-1">
-          <div className="mb-2 px-4 text-left text-xs text-gray-500">
+          <div className="text-subtle mb-2 px-4 text-left text-xs">
             {t("add_dynamic_variables").toLocaleUpperCase()}
           </div>
           {props.variables.map((variable) => (
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index 1c4fe0eb9b..00212949e9 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -390,13 +390,13 @@ export default function ToolbarPlugin(props: TextEditorProps) {
         {!props.excludedToolbarItems?.includes("blockType") && supportedBlockTypes.has(blockType) && (
           <>
             <Dropdown>
-              <DropdownMenuTrigger className="toolbar-item w-36 text-gray-500">
+              <DropdownMenuTrigger className="toolbar-item text-subtle w-36">
                 <>
                   <span className={"icon block-type " + blockType} />
-                  <span className="text hidden text-gray-700 sm:flex">
+                  <span className="text text-default hidden sm:flex">
                     {blockTypeToBlockName[blockType as keyof BlockType]}
                   </span>
-                  <FiChevronDown className="ml-2 h-4 w-4 text-gray-700" />
+                  <FiChevronDown className="text-default ml-2 h-4 w-4" />
                 </>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
@@ -409,7 +409,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                         onClick={() => format(key)}
                         className={classNames(
                           "toolbar-item  w-full rounded-none focus:ring-0",
-                          blockType === key ? "w-full  bg-gray-100" : ""
+                          blockType === key ? "bg-subtle  w-full" : ""
                         )}>
                         <>
                           <span className={"icon block-type " + key} />
diff --git a/packages/ui/components/empty-screen/EmptyScreen.tsx b/packages/ui/components/empty-screen/EmptyScreen.tsx
index 02251bd9b1..1ef65fcf7e 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -26,12 +26,12 @@ export function EmptyScreen({
       <div
         data-testid="empty-screen"
         className="min-h-80 flex w-full flex-col items-center justify-center rounded-md border border-dashed p-7 lg:p-20">
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-200 dark:bg-white">
-          <Icon className="inline-block h-10 w-10 stroke-[1.3px] dark:bg-gray-900 dark:text-gray-600" />
+        <div className="bg-emphasis dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full">
+          <Icon className="dark:bg-inverted inline-block h-10 w-10 stroke-[1.3px] dark:text-gray-600" />
         </div>
         <div className="flex max-w-[420px] flex-col items-center">
           <h2 className="text-semibold font-cal mt-6 text-center text-xl dark:text-gray-300">{headline}</h2>
-          <div className="mt-3 mb-8 text-center text-sm font-normal leading-6 text-gray-700 dark:text-gray-300">
+          <div className="text-default mt-3 mb-8 text-center text-sm font-normal leading-6 dark:text-gray-300">
             {description}
           </div>
           {buttonOnClick && buttonText && <Button onClick={(e) => buttonOnClick(e)}>{buttonText}</Button>}
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index e44c346fab..112b0fca8b 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -22,7 +22,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
             {React.createElement(
               descriptionAsLabel ? "div" : "label",
               {
-                className: classNames("flex text-sm font-medium text-gray-900"),
+                className: classNames("flex text-sm font-medium text-emphasis"),
                 ...(!descriptionAsLabel
                   ? {
                       htmlFor: rest.id,
@@ -40,7 +40,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
               {
                 className: classNames(
                   "relative flex items-start",
-                  !error && descriptionAsLabel ? "text-gray-900" : "text-gray-900",
+                  !error && descriptionAsLabel ? "text-emphasis" : "text-emphasis",
                   error && "text-red-800"
                 ),
               },
@@ -52,10 +52,10 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     type="checkbox"
                     disabled={disabled}
                     className={classNames(
-                      "text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2 ",
+                      "text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2 ",
                       !error && disabled
                         ? "bg-gray-300 checked:bg-gray-300"
-                        : "checked:bg-gray-800 hover:bg-gray-100",
+                        : "hover:bg-subtle checked:bg-gray-800",
                       error && "border-red-800 checked:bg-red-800 hover:bg-red-400",
                       rest.className
                     )}
diff --git a/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx b/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
index f9bf6f7d44..26d1ca8e3f 100644
--- a/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
+++ b/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
@@ -32,7 +32,7 @@ const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
       className={classNames(
         className,
         "dark:bg-darkgray-100 !flex !cursor-pointer !py-3 text-[inherit]",
-        isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
+        isFocused && "dark:!bg-darkgray-200 !bg-subtle",
         isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
       )}
       {...rest}
@@ -42,7 +42,7 @@ const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
       innerProps={props}>
       <input
         type="checkbox"
-        className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
+        className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2"
         checked={isSelected}
         readOnly
       />
diff --git a/packages/ui/components/form/color-picker/colorpicker.tsx b/packages/ui/components/form/color-picker/colorpicker.tsx
index 651c986ee4..c228e195d4 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -20,7 +20,7 @@ const ColorPicker = (props: ColorPickerProps) => {
   return (
     <div className="mt-1 flex items-center justify-center">
       <Popover.Root>
-        <div className="flex items-center rounded-l-md border border-r-0 border-gray-300 p-1.5">
+        <div className="border-default flex items-center rounded-l-md border border-r-0 p-1.5">
           <Popover.Trigger asChild>
             <button
               className="h-6 w-6 rounded-sm border-2 border-gray-900"
@@ -44,7 +44,7 @@ const ColorPicker = (props: ColorPickerProps) => {
       </Popover.Root>
 
       <HexColorInput
-        className="block w-full border border-gray-300 px-3 py-2  ltr:rounded-r-md rtl:rounded-l-md sm:text-sm"
+        className="border-default block w-full border px-3 py-2  ltr:rounded-r-md rtl:rounded-l-md sm:text-sm"
         color={color}
         onChange={(val) => {
           setColor(val);
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index 7bfed6afcd..a96cbcd2fb 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -17,16 +17,16 @@ const DateRangePicker = ({ disabled, startDate, endDate, onDatesChange }: Props)
     <>
       <PrimitiveDateRangePicker
         disabled={disabled || false}
-        className="rounded-sm border-gray-300 text-sm"
+        className="border-default rounded-sm text-sm"
         clearIcon={null}
-        calendarIcon={<FiCalendar className="h-4 w-4 text-gray-500" />}
-        rangeDivider={<FiArrowRight className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
+        calendarIcon={<FiCalendar className="text-subtle h-4 w-4" />}
+        rangeDivider={<FiArrowRight className="text-muted h-4 w-4 ltr:mr-2 rtl:ml-2" />}
         value={[startDate, endDate]}
         onChange={([startDate, endDate]: [Date, Date]) => {
           if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
         }}
-        nextLabel={<FiChevronRight className="h-4 w-4 text-gray-500" />}
-        prevLabel={<FiChevronLeft className="h-4 w-4 text-gray-500" />}
+        nextLabel={<FiChevronRight className="text-subtle h-4 w-4" />}
+        prevLabel={<FiChevronLeft className="text-subtle h-4 w-4" />}
       />
     </>
   );
diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index 3a4769694c..c1664ebb9c 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -18,12 +18,12 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
   return (
     <PrimitiveDatePicker
       className={classNames(
-        "focus:ring-primary-500 focus:border-primary-500 rounded-md border border-gray-300 p-1 pl-2 shadow-sm sm:text-sm",
+        "focus:ring-primary-500 focus:border-primary-500 border-default rounded-md border p-1 pl-2 shadow-sm sm:text-sm",
         className
       )}
       calendarClassName="rounded-md"
       clearIcon={null}
-      calendarIcon={<FiCalendar className="h-5 w-5 rounded-md text-gray-500" />}
+      calendarIcon={<FiCalendar className="text-subtle h-5 w-5 rounded-md" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index b682d70925..b989192a3d 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -18,7 +18,7 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
       {...props}
       className={classNames(
         !props.asChild &&
-          `inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium text-gray-700 ring-0 hover:bg-gray-50 focus:bg-gray-100 group-hover:text-black ${className}`
+          `focus:bg-subtle hover:bg-muted text-default group-hover:text-emphasis inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium ring-0 ${className}`
       )}
       ref={forwardedRef}
     />
@@ -39,7 +39,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
         {...props}
         sideOffset={sideOffset}
         className={classNames(
-          "shadow-dropdown w-50 relative z-10 ml-1.5 origin-top-right rounded-md border border-gray-200 bg-white text-sm",
+          "shadow-dropdown w-50 bg-default relative z-10 ml-1.5 origin-top-right rounded-md border border-gray-200 text-sm",
           "[&>*:first-child]:mt-1 [&>*:last-child]:mb-1"
         )}
         ref={forwardedRef}>
@@ -52,14 +52,14 @@ DropdownMenuContent.displayName = "DropdownMenuContent";
 
 type DropdownMenuLabelProps = ComponentProps<(typeof DropdownMenuPrimitive)["Label"]>;
 export const DropdownMenuLabel = (props: DropdownMenuLabelProps) => (
-  <DropdownMenuPrimitive.Label {...props} className="px-3 py-2 text-gray-500" />
+  <DropdownMenuPrimitive.Label {...props} className="text-subtle px-3 py-2" />
 );
 
 type DropdownMenuItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["CheckboxItem"]>;
 export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
   ({ className = "", ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.Item
-      className={`focus:ring-brand-800 text-sm text-gray-700 ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-1 ${className}`}
+      className={`focus:ring-brand-800 hover:bg-subtle hover:text-emphasis text-default text-sm ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] focus:outline-none focus:ring-1 ${className}`}
       {...props}
       ref={forwardedRef}
     />
@@ -135,8 +135,8 @@ export const DropdownItem = (props: DropdownItemProps) => {
     <ButtonOrLink
       {...rest}
       className={classNames(
-        "inline-flex w-full items-center px-3 py-2 text-gray-700 hover:text-gray-900 disabled:cursor-not-allowed",
-        color === "destructive" ? "hover:bg-red-100 hover:text-red-700" : "hover:bg-gray-100"
+        "hover:text-emphasis text-default inline-flex w-full items-center px-3 py-2 disabled:cursor-not-allowed",
+        color === "destructive" ? "hover:bg-error hover:text-red-700" : "hover:bg-subtle"
       )}>
       <>
         {StartIcon && <StartIcon className="h-4 w-4" />}
@@ -152,7 +152,7 @@ export const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSepa
   ({ className = "", ...props }, forwardedRef) => {
     return (
       <DropdownMenuPrimitive.Separator
-        className={classNames("my-1 h-px bg-gray-200", className)}
+        className={classNames("bg-emphasis my-1 h-px", className)}
         {...props}
         ref={forwardedRef}
       />
diff --git a/packages/ui/components/form/inputs/HintOrErrors.tsx b/packages/ui/components/form/inputs/HintOrErrors.tsx
index 14ad3945e9..2aaf3c83a7 100644
--- a/packages/ui/components/form/inputs/HintOrErrors.tsx
+++ b/packages/ui/components/form/inputs/HintOrErrors.tsx
@@ -21,7 +21,7 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
   if (!hintErrors && fieldErrors && !fieldErrors.message) {
     // no hints passed, field errors exist and they are custom ones
     return (
-      <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
+      <div className="text-gray text-default mt-2 flex items-center text-sm">
         <ul className="ml-2">
           {Object.keys(fieldErrors).map((key: string) => {
             return (
@@ -38,7 +38,7 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
   if (hintErrors && fieldErrors) {
     // hints passed, field errors exist
     return (
-      <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
+      <div className="text-gray text-default mt-2 flex items-center text-sm">
         <ul className="ml-2">
           {hintErrors.map((key: string) => {
             const submitted = formState.isSubmitted;
@@ -81,7 +81,7 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
 
   // hints passed, no errors exist, proceed to just show hints
   return (
-    <div className="text-gray mt-2 flex items-center text-sm text-gray-700">
+    <div className="text-gray text-default mt-2 flex items-center text-sm">
       <ul className="ml-2">
         {hintErrors.map((key: string) => {
           // if field was changed, as no error exist, show checked status and color
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 1d681e8528..02b749dc5e 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -23,7 +23,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       {...props}
       ref={ref}
       className={classNames(
-        "mb-2 block h-9 rounded-md border border-gray-300 py-2 px-3 text-sm placeholder:text-gray-400 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
+        "hover:border-emphasis border-default bg-default placeholder:text-muted mb-2 block h-9 rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
         isFullWidth && "w-full",
         props.className
       )}
@@ -33,7 +33,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
 
 export function InputLeading(props: JSX.IntrinsicElements["div"]) {
   return (
-    <span className="inline-flex flex-shrink-0 items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-gray-500 ltr:border-r-0 rtl:border-l-0 sm:text-sm">
+    <span className="bg-muted border-default text-subtle inline-flex flex-shrink-0 items-center rounded-l-sm border px-3 ltr:border-r-0 rtl:border-l-0 sm:text-sm">
       {props.children}
     </span>
   );
@@ -67,11 +67,11 @@ type AddonProps = {
 const Addon = ({ isFilled, children, className, error }: AddonProps) => (
   <div
     className={classNames(
-      "addon-wrapper h-9 border border-gray-300 px-3",
-      isFilled && "bg-gray-100",
+      "addon-wrapper border-default h-9 border px-3",
+      isFilled && "bg-subtle",
       className
     )}>
-    <div className={classNames("flex h-full flex-col justify-center text-sm", error && "text-red-900")}>
+    <div className={classNames("flex h-full flex-col justify-center text-sm", error && "text-error")}>
       <span className="whitespace-nowrap py-2.5">{children}</span>
     </div>
   </div>
@@ -114,7 +114,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
           htmlFor={id}
           loadingClassName="w-16"
           {...labelProps}
-          className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-red-900")}>
+          className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
           {label}
         </Skeleton>
       )}
@@ -165,7 +165,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
           )}
           {type === "search" && inputValue?.toString().length > 0 && (
             <FiX
-              className="absolute top-2.5 h-4 w-4 cursor-pointer text-gray-500 ltr:right-2 rtl:left-2"
+              className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
               onClick={(e) => {
                 setInputValue("");
                 props.onChange && props.onChange(e as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -186,7 +186,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
         />
       )}
       <HintsOrErrors hintErrors={hintErrors} fieldName={name} t={t} />
-      {hint && <div className="text-gray mt-2 flex items-center text-sm text-gray-700">{hint}</div>}
+      {hint && <div className="text-gray text-default mt-2 flex items-center text-sm">{hint}</div>}
     </div>
   );
 });
@@ -208,7 +208,7 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
   const textLabel = isPasswordVisible ? t("hide_password") : t("show_password");
 
   return (
-    <div className="relative [&_.group:hover_.addon-wrapper]:border-gray-400 [&_.group:focus-within_.addon-wrapper]:border-neutral-300">
+    <div className="[&_.group:hover_.addon-wrapper]:border-emphasis relative [&_.group:focus-within_.addon-wrapper]:border-neutral-300">
       <InputField
         type={isPasswordVisible ? "text" : "password"}
         placeholder={props.placeholder || "•••••••••••••"}
@@ -219,7 +219,7 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
         addOnSuffix={
           <Tooltip content={textLabel}>
             <button
-              className="absolute bottom-0 h-9 text-gray-900 ltr:right-3 rtl:left-3"
+              className="text-emphasis absolute bottom-0 h-9 ltr:right-3 rtl:left-3"
               type="button"
               onClick={() => toggleIsPasswordVisible()}>
               {isPasswordVisible ? (
@@ -272,7 +272,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        "block w-full rounded-md border border-gray-300 py-2 px-3 text-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
+        "hover:border-emphasis border-default block w-full rounded-md border py-2 px-3 text-sm focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
         props.className
       )}
     />
@@ -358,7 +358,7 @@ export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
 
 export function FieldsetLegend(props: JSX.IntrinsicElements["legend"]) {
   return (
-    <legend {...props} className={classNames("text-sm font-medium text-gray-700", props.className)}>
+    <legend {...props} className={classNames("text-default text-sm font-medium", props.className)}>
       {props.children}
     </legend>
   );
@@ -368,7 +368,7 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
   return (
     <div
       {...props}
-      className={classNames("space-y-2 rounded-sm border border-gray-300 bg-white p-2", props.className)}>
+      className={classNames("bg-default border-default space-y-2 rounded-sm border p-2", props.className)}>
       {props.children}
     </div>
   );
diff --git a/packages/ui/components/form/inputs/Label.tsx b/packages/ui/components/form/inputs/Label.tsx
index e83a81928a..04ba628f2e 100644
--- a/packages/ui/components/form/inputs/Label.tsx
+++ b/packages/ui/components/form/inputs/Label.tsx
@@ -5,7 +5,7 @@ export function Label(props: JSX.IntrinsicElements["label"]) {
     <label
       {...props}
       className={classNames(
-        "mb-2 block text-sm font-medium leading-none text-gray-700 dark:text-white",
+        "text-default dark:text-inverted mb-2 block text-sm font-medium leading-none",
         props.className
       )}>
       {props.children}
diff --git a/packages/ui/components/form/select/Select.tsx b/packages/ui/components/form/select/Select.tsx
index 0aa00916bd..e77f6cb141 100644
--- a/packages/ui/components/form/select/Select.tsx
+++ b/packages/ui/components/form/select/Select.tsx
@@ -136,7 +136,7 @@ export const SelectField = function SelectField<
     <div className={classNames(containerClassName)}>
       <div className={classNames(className)}>
         {!!label && (
-          <Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-red-900")}>
+          <Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-error")}>
             {label}
           </Label>
         )}
diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
index 54313a6910..0e09ad9645 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -28,7 +28,7 @@ export const InputComponent = <
     <reactSelectComponents.Input
       // disables our default form focus hightlight on the react-select input element
       inputClassName={classNames(
-        "focus:ring-0 focus:ring-offset-0 dark:!text-darkgray-900 !text-black",
+        "focus:ring-0 focus:ring-offset-0 dark:!text-darkgray-900 !text-emphasis",
         inputClassName
       )}
       {...props}
@@ -56,7 +56,7 @@ export const OptionComponent = <
       className={classNames(
         className,
         "dark:bg-darkgray-100 !flex !cursor-pointer justify-between !py-3",
-        props.isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
+        props.isFocused && "dark:!bg-darkgray-200 !bg-subtle",
         props.isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
       )}>
       <>
@@ -80,7 +80,7 @@ export const ControlComponent = <
     {...props}
     className={classNames(
       className,
-      "dark:bg-darkgray-100 dark:border-darkgray-300 !min-h-9  border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:border-0 focus-within:ring-2 focus-within:ring-neutral-800 hover:border-neutral-400 dark:focus-within:ring-white"
+      "dark:bg-darkgray-100 dark:border-darkgray-300 !min-h-9  bg-default border-default text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:border-0 focus-within:ring-2 focus-within:ring-neutral-800 hover:border-neutral-400 dark:focus-within:ring-white"
     )}
   />
 );
@@ -97,7 +97,7 @@ export const SingleValueComponent = <
     {...props}
     className={classNames(
       className,
-      "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400"
+      "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 placeholder:text-muted text-emphasis"
     )}
   />
 );
@@ -113,7 +113,7 @@ export const ValueContainerComponent = <
   <reactSelectComponents.ValueContainer
     {...props}
     className={classNames(
-      "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400",
+      "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 placeholder:text-muted text-emphasis",
       className
     )}
   />
@@ -130,7 +130,7 @@ export const MultiValueComponent = <
   <reactSelectComponents.MultiValue
     {...props}
     className={classNames(
-      "dark:bg-darkgray-200 dark:text-darkgray-900 !rounded-md bg-gray-100 text-gray-700",
+      "dark:bg-darkgray-200 dark:text-darkgray-900 bg-subtle text-default !rounded-md",
       className
     )}
   />
@@ -147,7 +147,7 @@ export const MenuComponent = <
   <reactSelectComponents.Menu
     {...props}
     className={classNames(
-      "dark:bg-darkgray-100 !rounded-md bg-white text-sm leading-4 dark:text-white",
+      "dark:bg-darkgray-100 bg-default dark:text-inverted !rounded-md text-sm leading-4",
       className
     )}
   />
diff --git a/packages/ui/components/form/selectimproved/components/Item.tsx b/packages/ui/components/form/selectimproved/components/Item.tsx
index 2d437568db..f30c5beaae 100755
--- a/packages/ui/components/form/selectimproved/components/Item.tsx
+++ b/packages/ui/components/form/selectimproved/components/Item.tsx
@@ -24,7 +24,7 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
       <li
         className={cn(
           "dark:text-darkgray-400 flex cursor-not-allowed select-none justify-between truncate rounded-[4px] px-3 py-2 text-gray-300 ",
-          focused ? "dark:bg-darkgray-200 bg-gray-50" : "dark:hover:bg-darkgray-200 hover:bg-gray-100"
+          focused ? "dark:bg-darkgray-200 bg-muted" : "dark:hover:bg-darkgray-200 hover:bg-subtle"
         )}>
         <>
           <div className="space-x flex items-center">
@@ -37,12 +37,12 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
                 "flex h-4 w-4 items-center justify-center rounded-[4px]  border opacity-70 ltr:mr-2 rtl:ml-2",
                 isSelected
                   ? "dark:bg-darkgray-200 dark:text-darkgray-900 dark:border-darkgray-300 bg-gray-800 text-gray-50"
-                  : "dark:text-darkgray-600 dark:bg-darkgray-200 dark:border-darkgray-300 border-gray-300 bg-gray-50 text-gray-600"
+                  : "dark:text-darkgray-600 dark:bg-darkgray-200 dark:border-darkgray-300 border-default bg-mutedext-gray-600"
               )}>
               {isSelected && <FiCheck className="h-3 w-3 text-current" />}
             </div>
           ) : (
-            isSelected && <FiCheck className="h-3 w-3 text-black" strokeWidth={2} />
+            isSelected && <FiCheck className="h-3 w-3 text-emphasis" strokeWidth={2} />
           )}
         </>
       </li>
@@ -58,9 +58,9 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
       className={cn(
         "block flex cursor-pointer select-none items-center justify-between truncate border-transparent px-3 py-2 transition duration-200",
         isSelected
-          ? "dark:bg-darkgray-200 dark:text-darkgray-900 bg-gray-100 text-gray-900"
-          : "dark:text-darkgray-700 dark:hover:bg-darkgray-200 text-gray-700 hover:bg-gray-100",
-        focused && "dark:bg-darkgray-200 bg-gray-50",
+          ? "dark:bg-darkgray-200 dark:text-darkgray-900 bg-subtle text-emphasis"
+          : "dark:text-darkgray-700 dark:hover:bg-darkgray-200 text-default hover:bg-subtle",
+        focused && "dark:bg-darkgray-200 bg-muted
         classNames?.listItem
       )}>
       <div className="flex items-center space-x-2">
@@ -74,12 +74,12 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
             "flex h-4 w-4 items-center justify-center rounded-[4px]  border ltr:mr-2 rtl:ml-2",
             isSelected
               ? "dark:bg-darkgray-200 dark:text-darkgray-900 dark:border-darkgray-300 bg-gray-800 text-gray-50"
-              : "dark:text-darkgray-600 dark:bg-darkgray-200 dark:border-darkgray-300 border-gray-300 bg-gray-50 text-gray-600"
+              : "dark:text-darkgray-600 dark:bg-darkgray-200 dark:border-darkgray-300 border-default bg-mutedext-gray-600"
           )}>
           {isSelected && <FiCheck className="h-3 w-3 text-current" />}
         </div>
       ) : (
-        isSelected && <FiCheck className="h-3 w-3 text-black" strokeWidth={2} />
+        isSelected && <FiCheck className="h-3 w-3 text-emphasis" strokeWidth={2} />
       )}
     </li>
   );
diff --git a/packages/ui/components/form/selectimproved/components/SearchInput.tsx b/packages/ui/components/form/selectimproved/components/SearchInput.tsx
index 5d636a988c..3a87813ce4 100755
--- a/packages/ui/components/form/selectimproved/components/SearchInput.tsx
+++ b/packages/ui/components/form/selectimproved/components/SearchInput.tsx
@@ -28,7 +28,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
         className={
           classNames && classNames.searchIcon
             ? classNames.searchIcon
-            : "dark:text-darkgray-500 absolute mt-2.5 ml-2 h-5 w-5 pb-0.5 text-gray-500"
+            : "dark:text-darkgray-500 text-subtle absolute mt-2.5 ml-2 h-5 w-5 pb-0.5"
         }
       />
       <input
@@ -36,7 +36,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
         className={
           classNames && classNames.searchBox
             ? classNames.searchBox
-            : "dark:border-darkgray-300 dark:bg-darkgray-100  dark:text-darkgray-900 focus:border-darkgray-900 w-full rounded-[6px] border border-gray-200 py-2 pl-8 text-sm text-gray-500 focus:border-gray-900 focus:outline-none focus:ring-0"
+            : "dark:border-darkgray-300 dark:bg-darkgray-100  dark:text-darkgray-900 focus:border-darkgray-900 text-subtle w-full rounded-[6px] border border-gray-200 py-2 pl-8 text-sm focus:border-gray-900 focus:outline-none focus:ring-0"
         }
         autoFocus
         type="text"
diff --git a/packages/ui/components/form/selectimproved/components/Select.tsx b/packages/ui/components/form/selectimproved/components/Select.tsx
index 81f08bc926..94feb66ee9 100755
--- a/packages/ui/components/form/selectimproved/components/Select.tsx
+++ b/packages/ui/components/form/selectimproved/components/Select.tsx
@@ -128,15 +128,15 @@ function Select<T extends Option>({
           <Popover.Trigger>
             <div
               className={cn(
-                "min-w-64 flex max-h-[36px] items-center justify-between rounded-md border border-gray-300 text-sm text-gray-400 transition-all duration-300 focus:outline-none",
+                "min-w-64 border-default text-muted flex max-h-[36px] items-center justify-between rounded-md border text-sm transition-all duration-300 focus:outline-none",
                 isDisabled
-                  ? " dark:bg-darkgray-200 dark:border-darkgray-300 border-gray-200 bg-gray-100 text-gray-400 dark:text-gray-500"
-                  : "dark:border-darkgray-300 dark:bg-darkgray-50 dark:text-darkgray-500 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-white hover:border-gray-600 focus:border-gray-900"
+                  ? " dark:bg-darkgray-200 dark:border-darkgray-300 bg-subtle dark:text-subtle text-muted border-gray-200"
+                  : "dark:border-darkgray-300 dark:bg-darkgray-50 dark:text-darkgray-500 dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-default hover:border-gray-600 focus:border-gray-900"
               )}>
               <div className="flex w-full grow-0 items-center gap-1 overflow-x-hidden">
                 <>
                   {((isMultipleValue && selectedItems.length === 0) || selectedItems === null) && (
-                    <div className="py-2.5 px-3 text-gray-400 dark:text-current">
+                    <div className="text-muted py-2.5 px-3 dark:text-current">
                       <p>{placeholder}</p>
                     </div>
                   )}
@@ -146,13 +146,13 @@ function Select<T extends Option>({
                       {selectedItems.map((item, index) => (
                         <div
                           className={cn(
-                            "dark:bg-darkgray-200 flex items-center space-x-2 rounded bg-gray-200 px-2 py-[6px]"
+                            "dark:bg-darkgray-200 bg-emphasis flex items-center space-x-2 rounded px-2 py-[6px]"
                           )}
                           key={index}>
                           <p
                             className={cn(
                               classNames?.tagItemText ??
-                                "dark:text-darkgray-900 cursor-default select-none truncate text-sm leading-none text-gray-700"
+                                "dark:text-darkgray-900 text-default cursor-default select-none truncate text-sm leading-none"
                             )}>
                             {item.label}
                           </p>
@@ -165,7 +165,7 @@ function Select<T extends Option>({
                               <FiX
                                 className={
                                   classNames?.tagItemIcon ??
-                                  "dark:text-darkgray-700 dark:hover:text-darkgray-900 h-4 w-4 text-gray-500 hover:text-gray-900"
+                                  "dark:text-darkgray-700 dark:hover:text-darkgray-900 hover:text-emphasis text-subtle h-4 w-4"
                                 }
                               />
                             </button>
@@ -174,14 +174,14 @@ function Select<T extends Option>({
                       ))}
                     </div>
                   ) : (
-                    <div className="dark:text-darkgray-900 py-2.5 px-3 text-sm leading-none text-gray-900">
+                    <div className="dark:text-darkgray-900 text-emphasis py-2.5 px-3 text-sm leading-none">
                       <p>{selectedItems?.label}</p>
                     </div>
                   )}
                 </>
               </div>
 
-              <div className="dark:text-darkgray-900 flex flex-none items-center rounded-[6px] p-1.5 text-gray-900 opacity-75 ">
+              <div className="dark:text-darkgray-900 text-emphasis flex flex-none items-center rounded-[6px] p-1.5 opacity-75 ">
                 <>
                   {isClearable && !isDisabled && selectedItems !== null && (
                     <div className="cursor-pointer" onClick={clearValue}>
@@ -203,7 +203,7 @@ function Select<T extends Option>({
               <div
                 className={
                   classNames?.menu ??
-                  "dark:bg-darkgray-100 dark:border-darkgray-300 min-w-64 z-10 mt-1.5 overflow-x-hidden rounded border bg-white py-1 text-sm text-gray-700 shadow-sm"
+                  "dark:bg-darkgray-100 dark:border-darkgray-300 min-w-64 bg-default text-default z-10 mt-1.5 overflow-x-hidden rounded border py-1 text-sm shadow-sm"
                 }>
                 {isSearchable && (
                   <SearchInput
diff --git a/packages/ui/components/form/step/FormStep.tsx b/packages/ui/components/form/step/FormStep.tsx
index 0e22ac57df..ead893f51a 100644
--- a/packages/ui/components/form/step/FormStep.tsx
+++ b/packages/ui/components/form/step/FormStep.tsx
@@ -11,7 +11,7 @@ type Props = {
 function FormStep({ currentStep, steps }: Props) {
   return (
     <div className="w-full">
-      <p className="text-xs font-medium text-gray-400">
+      <p className="text-muted text-xs font-medium">
         Step {currentStep} of {steps}
       </p>
       <div className="flex flex-nowrap space-x-1">
diff --git a/packages/ui/components/form/step/Stepper.tsx b/packages/ui/components/form/step/Stepper.tsx
index e260c458e5..3bbaba5ce4 100644
--- a/packages/ui/components/form/step/Stepper.tsx
+++ b/packages/ui/components/form/step/Stepper.tsx
@@ -32,13 +32,13 @@ function Stepper<T extends DefaultStep>(props: {
                   replace
                   legacyBehavior>
                   {index + 1 < props.step ? (
-                    <a className="block h-2.5 w-2.5 rounded-full bg-gray-600 hover:bg-gray-900">
+                    <a className="hover:bg-inverted block h-2.5 w-2.5 rounded-full bg-gray-600">
                       <span className="sr-only">{mapStep.title}</span>
                     </a>
                   ) : index + 1 === props.step ? (
                     <a className="relative flex items-center justify-center" aria-current="step">
                       <span className="absolute flex h-5 w-5 p-px" aria-hidden="true">
-                        <span className="h-full w-full rounded-full bg-gray-200" />
+                        <span className="bg-emphasis h-full w-full rounded-full" />
                       </span>
                       <span
                         className="relative block h-2.5 w-2.5 rounded-full bg-gray-600"
@@ -47,7 +47,7 @@ function Stepper<T extends DefaultStep>(props: {
                       <span className="sr-only">{mapStep.title}</span>
                     </a>
                   ) : (
-                    <a className="block h-2.5 w-2.5 rounded-full bg-gray-200 hover:bg-gray-400">
+                    <a className="bg-emphasis block h-2.5 w-2.5 rounded-full hover:bg-gray-400">
                       <span className="sr-only">{mapStep.title}</span>
                     </a>
                   )}
diff --git a/packages/ui/components/form/step/Steps.tsx b/packages/ui/components/form/step/Steps.tsx
index 8475f418b3..93aa7d1129 100644
--- a/packages/ui/components/form/step/Steps.tsx
+++ b/packages/ui/components/form/step/Steps.tsx
@@ -16,7 +16,7 @@ const Steps = (props: ISteps) => {
   } = props;
   return (
     <div className="mt-6 space-y-2">
-      <p className="text-xs font-medium text-gray-500 dark:text-white">{stepLabel(currentStep, maxSteps)}</p>
+      <p className="text-subtle dark:text-inverted text-xs font-medium">{stepLabel(currentStep, maxSteps)}</p>
       <div className="flex w-full space-x-2 rtl:space-x-reverse">
         {new Array(maxSteps).fill(0).map((_s, index) => {
           return index <= currentStep - 1 ? (
@@ -24,7 +24,7 @@ const Steps = (props: ISteps) => {
               key={`step-${index}`}
               onClick={() => navigateToStep(index)}
               className={classNames(
-                "h-1 w-full rounded-[1px] bg-black dark:bg-white",
+                "dark:bg-default h-1 w-full rounded-[1px] bg-black",
                 index < currentStep - 1 ? "cursor-pointer" : ""
               )}
             />
diff --git a/packages/ui/components/form/switch/SettingsToggle.tsx b/packages/ui/components/form/switch/SettingsToggle.tsx
index d4474a412f..b397fcb1ed 100644
--- a/packages/ui/components/form/switch/SettingsToggle.tsx
+++ b/packages/ui/components/form/switch/SettingsToggle.tsx
@@ -42,7 +42,7 @@ function SettingsToggle({
             />
 
             <div>
-              <Label className="text-sm font-semibold leading-none text-black">{title}</Label>
+              <Label className="text-emphasis text-sm font-semibold leading-none">{title}</Label>
               {description && <p className="-mt-1.5 text-sm leading-normal text-gray-600">{description}</p>}
             </div>
           </div>
diff --git a/packages/ui/components/form/switch/Switch.tsx b/packages/ui/components/form/switch/Switch.tsx
index 409eecc5c7..53b46662f8 100644
--- a/packages/ui/components/form/switch/Switch.tsx
+++ b/packages/ui/components/form/switch/Switch.tsx
@@ -31,7 +31,7 @@ const Switch = (
       <div className={classNames("flex h-auto w-auto flex-row items-center", fitToHeight && "h-fit")}>
         <PrimitiveSwitch.Root
           className={classNames(
-            props.checked ? "bg-gray-900" : "bg-gray-200",
+            props.checked ? "bg-brand-default" : "bg-emphasis",
             primitiveProps.disabled ? "cursor-not-allowed" : "hover:bg-gray-300",
             "focus:ring-brand-800 h-5 w-[34px] rounded-full shadow-none",
             props.className
@@ -42,7 +42,7 @@ const Switch = (
             // Since we dont support global dark mode - we have to style dark mode components specifically on the instance for now
             // TODO: Remove once we support global dark mode
             className={classNames(
-              "block h-[14px] w-[14px] rounded-full bg-white transition will-change-transform ltr:translate-x-[4px] rtl:-translate-x-[4px] ltr:[&[data-state='checked']]:translate-x-[17px] rtl:[&[data-state='checked']]:-translate-x-[17px]",
+              "bg-default block h-[14px] w-[14px] rounded-full transition will-change-transform ltr:translate-x-[4px] rtl:-translate-x-[4px] ltr:[&[data-state='checked']]:translate-x-[17px] rtl:[&[data-state='checked']]:-translate-x-[17px]",
               props.checked && "shadow-inner",
               props.thumbProps?.className
             )}
@@ -52,7 +52,7 @@ const Switch = (
           <Label.Root
             htmlFor={id}
             className={classNames(
-              "align-text-top text-sm font-medium text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-white",
+              "text-emphasis dark:text-inverted align-text-top text-sm font-medium ltr:ml-2 rtl:mr-2",
               primitiveProps.disabled ? "cursor-not-allowed opacity-25" : "cursor-pointer "
             )}>
             {label}
diff --git a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
index c01026a959..dd5fc00aa5 100644
--- a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
@@ -33,8 +33,8 @@ export const BooleanToggleGroup = function BooleanToggleGroup({
   }
   const commonClass =
     "w-full inline-flex items-center justify-center rounded py-[10px] px-4 text-sm font-medium  leading-4";
-  const selectedClass = classNames(commonClass, "bg-gray-200  text-gray-900");
-  const unselectedClass = classNames(commonClass, "text-gray-600 hover:bg-gray-100 hover:text-gray-900");
+  const selectedClass = classNames(commonClass, "bg-emphasis  text-emphasis");
+  const unselectedClass = classNames(commonClass, "text-gray-600 hover:bg-subtle hover:text-emphasis");
   return (
     <ToggleGroupPrimitive
       value={yesNoValue}
@@ -78,7 +78,7 @@ export const BooleanToggleGroupField = function BooleanToggleGroupField(
     <div className={classNames(containerClassName)}>
       <div className={className}>
         {!!label && (
-          <Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-red-900", "mt-4")}>
+          <Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-error", "mt-4")}>
             {label}
           </Label>
         )}
diff --git a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
index f7ef07737c..4a0064bf94 100644
--- a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
@@ -32,7 +32,7 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
         {/* Active toggle. It's a separate element so we can animate it nicely. */}
         <span
           aria-hidden
-          className="dark:bg-darkgray-200 absolute top-[4px] bottom-[4px] left-0 z-[0] rounded-[4px] bg-gray-200 transition-all"
+          className="dark:bg-darkgray-200 bg-emphasis absolute top-[4px] bottom-[4px] left-0 z-[0] rounded-[4px] transition-all"
           style={{ left: activeToggleElement?.offsetLeft, width: activeToggleElement?.offsetWidth }}
         />
         {options.map((option) => (
@@ -43,7 +43,7 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
             className={classNames(
               "relative rounded-[4px] px-3 py-1 text-sm",
               option.disabled
-                ? "dark:text-darkgray-900 text-gray-400 hover:cursor-not-allowed"
+                ? "dark:text-darkgray-900 text-muted hover:cursor-not-allowed"
                 : "dark:text-darkgray-800 [&[aria-checked='false']]:hover:font-medium",
               isFullWidth && "w-full"
             )}
diff --git a/packages/ui/components/form/wizard/WizardForm.tsx b/packages/ui/components/form/wizard/WizardForm.tsx
index ad16c01931..377d9779ba 100644
--- a/packages/ui/components/form/wizard/WizardForm.tsx
+++ b/packages/ui/components/form/wizard/WizardForm.tsx
@@ -44,8 +44,8 @@ function WizardForm<T extends DefaultStep>(props: {
     <div className="mx-auto mt-4 print:w-full">
       <div className={classNames("overflow-hidden  md:mb-2 md:w-[700px]", props.containerClassname)}>
         <div className="px-6 py-5 sm:px-14">
-          <h1 className="font-cal text-2xl text-gray-900">{currentStep.title}</h1>
-          <p className="text-sm text-gray-500">{currentStep.description}</p>
+          <h1 className="font-cal text-emphasis text-2xl">{currentStep.title}</h1>
+          <p className="text-subtle text-sm">{currentStep.description}</p>
           {!props.disableNavigation && (
             <Steps maxSteps={steps.length} currentStep={step} navigateToStep={noop} stepLabel={stepLabel} />
           )}
diff --git a/packages/ui/components/image-uploader/ImageUploader.tsx b/packages/ui/components/image-uploader/ImageUploader.tsx
index 686c890515..34cd608165 100644
--- a/packages/ui/components/image-uploader/ImageUploader.tsx
+++ b/packages/ui/components/image-uploader/ImageUploader.tsx
@@ -167,7 +167,7 @@ export default function ImageUploader({
       <DialogContent>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
+            <h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
               {t("upload_target", { target })}
             </h3>
           </div>
@@ -175,9 +175,9 @@ export default function ImageUploader({
         <div className="mb-4">
           <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
-              <div className="flex h-20 max-h-20 w-20 items-center justify-start rounded-full bg-gray-50">
+              <div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
                 {!imageSrc && (
-                  <p className="w-full text-center text-sm text-white sm:text-xs">
+                  <p className="text-inverted w-full text-center text-sm sm:text-xs">
                     {t("no_target", { target })}
                   </p>
                 )}
@@ -188,7 +188,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted border-default text-default dark:text-inverted mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
               <input
                 onInput={onInputFile}
                 type="file"
diff --git a/packages/ui/components/layout/ShellSubHeading.tsx b/packages/ui/components/layout/ShellSubHeading.tsx
index 7f95a3e28d..ba09fe9338 100644
--- a/packages/ui/components/layout/ShellSubHeading.tsx
+++ b/packages/ui/components/layout/ShellSubHeading.tsx
@@ -11,10 +11,10 @@ export function ShellSubHeading(props: {
   return (
     <header className={classNames("mb-3 block justify-between sm:flex", props.className)}>
       <div>
-        <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
+        <h2 className="text-emphasis flex content-center items-center space-x-2 text-base font-bold leading-6 rtl:space-x-reverse">
           {props.title}
         </h2>
-        {props.subtitle && <p className="text-sm text-gray-500 ltr:mr-4">{props.subtitle}</p>}
+        {props.subtitle && <p className="text-subtle text-sm 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/layout/spacing.stories.mdx b/packages/ui/components/layout/spacing.stories.mdx
index 3832920e6b..3100ff654b 100644
--- a/packages/ui/components/layout/spacing.stories.mdx
+++ b/packages/ui/components/layout/spacing.stories.mdx
@@ -31,52 +31,52 @@ Defines the spacing guide used in Cal.coms design system
       <Example title="0"></Example>
       <Example title="px">
         <Tooltip content="1px">
-          <div className="h-4 w-px bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-px bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="0.5">
         <Tooltip content="2px">
-          <div className="h-4 w-0.5 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-0.5 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="1">
         <Tooltip content="4px">
-          <div className="h-4 w-1 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-1 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="2">
         <Tooltip content="8px">
-          <div className="h-4 w-2 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-2 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="3">
         <Tooltip content="12px">
-          <div className="h-4 w-3 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-3 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="4">
         <Tooltip content="16px">
-          <div className="h-4 w-4 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-4 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="5">
         <Tooltip content="20px">
-          <div className="h-4 w-5 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-5 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="6">
         <Tooltip content="24px">
-          <div className="h-4 w-6 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-6 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="8">
         <Tooltip content="32px">
-          <div className="h-4 w-8 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-8 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
       <Example title="10">
         <Tooltip content="48px">
-          <div className="h-4 w-10 bg-gray-900 rounded-sm"> </div>
+          <div className="h-4 w-10 bg-inverted rounded-sm"> </div>
         </Tooltip>
       </Example>
     </>
diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx
index 974896f551..108f8db7a0 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -39,7 +39,7 @@ export function ListItem(props: ListItemProps) {
     {
       ...passThroughProps,
       className: classNames(
-        "items-center bg-white min-w-0 flex-1 flex border-neutral-200 p-4 sm:mx-0 md:border md:p-4 xl:mt-0",
+        "items-center bg-default min-w-0 flex-1 flex border-neutral-200 p-4 sm:mx-0 md:border md:p-4 xl:mt-0",
         expanded ? "my-2 border" : "border -mb-px last:mb-0",
         // Pass rounded false to not round the corners -> Usefull when used in list we can use roundedContainer to create the right design
         rounded ? "rounded-md" : "rounded-none",
@@ -78,7 +78,7 @@ export function ListLinkItem(props: ListLinkItemProps) {
       className={classNames(
         "group flex w-full items-center justify-between p-5 hover:bg-neutral-50",
         className,
-        disabled ? "hover:bg-white" : ""
+        disabled ? "hover:bg-default" : ""
       )}>
       <Link
         passHref
@@ -108,7 +108,7 @@ export function ListItemTitle<TComponent extends keyof JSX.IntrinsicElements = "
     component,
     {
       ...passThroughProps,
-      className: classNames("text-sm font-medium text-gray-900 truncate", props.className),
+      className: classNames("text-sm font-medium text-emphasis truncate", props.className),
     },
     props.children
   );
@@ -123,7 +123,7 @@ export function ListItemText<TComponent extends keyof JSX.IntrinsicElements = "s
     component,
     {
       ...passThroughProps,
-      className: classNames("text-sm text-gray-500 truncate", props.className),
+      className: classNames("text-sm text-subtle truncate", props.className),
     },
     props.children
   );
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index 0f051ab51b..7fbc0ee803 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -31,7 +31,7 @@ const HorizontalTabItem = function ({ name, href, linkProps, avatar, ...props }:
       href={href}
       {...linkProps}
       className={classNames(
-        isCurrent ? "bg-gray-100 text-gray-900" : "  text-gray-600 hover:bg-gray-100 hover:text-gray-900 ",
+        isCurrent ? "bg-subtle text-emphasis" : "  hover:bg-subtle hover:text-emphasis text-gray-600 ",
         "inline-flex items-center justify-center whitespace-nowrap rounded-[6px] p-2 text-sm font-medium leading-4 md:mb-0",
         props.disabled && "pointer-events-none !opacity-30",
         props.className
@@ -42,7 +42,7 @@ const HorizontalTabItem = function ({ name, href, linkProps, avatar, ...props }:
         //@ts-ignore
         <props.icon
           className={classNames(
-            isCurrent ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
+            isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
             "-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/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index eaad1d46c6..0744f9f806 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -51,7 +51,7 @@ const VerticalTabItem = function ({
             target={props.isExternalLink ? "_blank" : "_self"}
             className={classNames(
               props.textClassNames || "text-sm font-medium leading-none text-gray-600",
-              "min-h-8 group flex w-64 flex-row items-center rounded-md px-3 py-[10px] hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900",
+              "min-h-8 hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default group flex w-64 flex-row items-center rounded-md px-3 py-[10px]",
               props.disabled && "pointer-events-none !opacity-30",
               (isChild || !props.icon) && "ml-7 w-auto ltr:mr-5 rtl:ml-5",
               !info ? "h-6" : "h-14",
@@ -80,7 +80,7 @@ const VerticalTabItem = function ({
                 <FiChevronRight
                   width={20}
                   height={20}
-                  className="h-auto w-[20px] stroke-[1.5px] text-gray-700"
+                  className="text-default h-auto w-[20px] stroke-[1.5px]"
                 />
               </div>
             )}
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index f6774af090..f8997cb72f 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -44,7 +44,7 @@ export const AnimatedPopover = ({
       <Popover.Trigger asChild>
         <div
           ref={ref}
-          className="mb-2 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border border-gray-300 px-3 py-2 text-sm placeholder:text-gray-400 hover:cursor-pointer hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
+          className="hover:border-emphasis border-default placeholder:text-muted mb-2 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
           <div className="max-w-36 flex items-center">
             <Tooltip content={text}>
               <div className="truncate">
@@ -63,7 +63,7 @@ export const AnimatedPopover = ({
       <Popover.Content side="bottom" align={align} asChild>
         <div
           className={classNames(
-            "absolute z-50 mt-2 max-h-64 w-56 overflow-y-scroll rounded-md bg-white py-[2px] shadow-sm ring-1 ring-black ring-opacity-5 focus-within:outline-none",
+            "bg-default absolute z-50 mt-2 max-h-64 w-56 overflow-y-scroll rounded-md py-[2px] shadow-sm ring-1 ring-black ring-opacity-5 focus-within:outline-none",
             align === "end" && "-translate-x-[228px]"
           )}>
           {children}
diff --git a/packages/ui/components/popover/MeetingTimeInTimezones.tsx b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
index 2307cd46ea..b04a916fab 100644
--- a/packages/ui/components/popover/MeetingTimeInTimezones.tsx
+++ b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
@@ -62,14 +62,14 @@ const MeetingTimeInTimezones = ({
     <Popover.Root>
       <Popover.Trigger
         onClick={preventBubbling}
-        className="popover-button invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm text-gray-900 transition-colors hover:bg-gray-200 focus:bg-gray-200 group-hover:visible">
+        className="popover-button text-emphasis hover:bg-emphasis focus:bg-emphasis invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors group-hover:visible">
         <FiGlobe />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
           onClick={preventBubbling}
           side="top"
-          className="popover-content slideInBottom border-5 bg-brand-500 rounded-md border-gray-200 p-3 text-sm text-white shadow-sm">
+          className="popover-content slideInBottom border-5 bg-brand-default text-inverted rounded-md border-gray-200 p-3 text-sm shadow-sm">
           {times.map((time) => (
             <span className="mt-2 block first:mt-0" key={time.timezone}>
               <span className="inline-flex align-baseline">
@@ -81,7 +81,7 @@ const MeetingTimeInTimezones = ({
                 )}
               </span>
               <br />
-              <span className="text-gray-400">{time.timezone}</span>
+              <span className="text-muted">{time.timezone}</span>
             </span>
           ))}
         </Popover.Content>
diff --git a/packages/ui/components/skeleton/Loader.tsx b/packages/ui/components/skeleton/Loader.tsx
index bdafe827f8..8aa703a22f 100644
--- a/packages/ui/components/skeleton/Loader.tsx
+++ b/packages/ui/components/skeleton/Loader.tsx
@@ -3,7 +3,7 @@
  **/
 export default function Loader() {
   return (
-    <div className="loader border-brand dark:border-darkmodebrand">
+    <div className="loader border-brand-default dark:border-darkmodebrand">
       <span className="loader-inner bg-brand dark:bg-darkmodebrand" />
     </div>
   );
diff --git a/packages/ui/components/skeleton/index.tsx b/packages/ui/components/skeleton/index.tsx
index a9885c378d..2be899f63d 100644
--- a/packages/ui/components/skeleton/index.tsx
+++ b/packages/ui/components/skeleton/index.tsx
@@ -14,7 +14,7 @@ interface SkeletonContainer {
 }
 
 const SkeletonAvatar: React.FC<SkeletonBaseProps> = ({ className }) => {
-  return <div className={classNames(`mt-1 rounded-full bg-gray-200 ltr:mr-2 rtl:ml-2`, className)} />;
+  return <div className={classNames(`mt-1 rounded-full bg-emphasis ltr:mr-2 rtl:ml-2`, className)} />;
 };
 
 type SkeletonProps<T> = {
@@ -83,7 +83,7 @@ const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean }> = ({
 const SkeletonButton: React.FC<SkeletonBaseProps> = ({ className }) => {
   return (
     <SkeletonContainer>
-      <div className={classNames(`rounded-md bg-gray-200`, className)} />
+      <div className={classNames(`rounded-md bg-emphasis`, className)} />
     </SkeletonContainer>
   );
 };
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 7feb633941..e62e6162af 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -11,7 +11,7 @@ type IToast = {
 export const SuccessToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "data-testid-toast-success bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
+      "data-testid-toast-success bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
@@ -24,7 +24,7 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
 export const ErrorToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "animate-fade-in-up mb-2 flex h-auto items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md rtl:space-x-reverse md:max-w-sm",
+      "animate-fade-in-up bg-error text-error mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
@@ -37,7 +37,7 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
 export const WarningToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "animate-fade-in-up bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
+      "animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
@@ -50,7 +50,7 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
 export const DefaultToast = ({ message, toastVisible }: IToast) => (
   <div
     className={classNames(
-      "animate-fade-in-up bg-brand-500 mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md rtl:space-x-reverse md:max-w-sm",
+      "animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx
index 75c832b579..b532ec54e7 100644
--- a/packages/ui/components/tooltip/Tooltip.tsx
+++ b/packages/ui/components/tooltip/Tooltip.tsx
@@ -31,7 +31,7 @@ export function Tooltip({
           className={classNames(
             side === "top" && "-mt-7",
             side === "right" && "ml-2",
-            "relative rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg dark:bg-white dark:text-gray-600"
+            "bg-inverted dark:bg-default text-inverted relative rounded-md px-2 py-1 text-xs font-semibold shadow-lg dark:text-gray-600"
           )}
           side={side}
           align="center"
diff --git a/packages/ui/components/tooltip/tooltip.stories.mdx b/packages/ui/components/tooltip/tooltip.stories.mdx
index 0bc79d6778..2d7e7e8fb0 100644
--- a/packages/ui/components/tooltip/tooltip.stories.mdx
+++ b/packages/ui/components/tooltip/tooltip.stories.mdx
@@ -21,7 +21,7 @@ Tooltip components can be used to provide additional information about an elemen
         <VariantRow variant="Default">
           <Tooltip content="Copy to clipboard">
             <span
-              className="dark:text-darkgray-50 p-2 bg-brand-500 rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
+              className="dark:text-darkgray-50 p-2 bg-brand-default rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
               onClick={() => {
                 alert('Copied!');
               }}>
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index a1e8bf2215..76e3feaee4 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -28,12 +28,12 @@ export function TopBanner(props: TopBannerProps) {
         variantClassName[variant]
       )}>
       <div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 lg:flex-row lg:items-center">
-        <p className="flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 text-gray-900 lg:flex-row lg:items-center">
+        <p className="text-emphasis flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 lg:flex-row lg:items-center">
           {variant === "error" && (
-            <FiAlertTriangle className="h-4 w-4 stroke-[2.5px] text-black" aria-hidden="true" />
+            <FiAlertTriangle className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
           )}
           {variant === "warning" && (
-            <FiInfo className="h-4 w-4 stroke-[2.5px] text-black" aria-hidden="true" />
+            <FiInfo className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
           )}
           {text}
         </p>
@@ -43,8 +43,8 @@ export function TopBanner(props: TopBannerProps) {
         <button
           type="button"
           onClick={noop}
-          className="hover:bg-gray-20 flex items-center rounded-lg p-1.5 text-sm text-gray-400">
-          <XIcon className="h-4 w-4 text-black" />
+          className="hover:bg-gray-20 text-muted flex items-center rounded-lg p-1.5 text-sm">
+          <XIcon className="text-emphasis h-4 w-4" />
         </button>
       )}
     </div>
diff --git a/packages/ui/form/AddressInput.tsx b/packages/ui/form/AddressInput.tsx
index 7e7ff90e9a..aa57f3437e 100644
--- a/packages/ui/form/AddressInput.tsx
+++ b/packages/ui/form/AddressInput.tsx
@@ -20,7 +20,7 @@ function AddressInput({ className = "", value, onChange, ...rest }: AddressInput
           onChange(e.target.value);
         }}
         color="#D2D2D2"
-        className={`${className} focus-within:border-brand dark:bg-darkgray-100 dark:border-darkgray-300 block h-10 w-full rounded-md border  border border-gray-300 py-px pl-10 text-sm outline-none ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:text-white dark:placeholder-gray-500 dark:selection:bg-green-500 disabled:dark:text-gray-500`}
+        className={`${className} focus-within:border-brand-default dark:bg-darkgray-100 dark:border-darkgray-300 border-default disabled:text-subtle disabled:dark:text-subtle dark:text-inverted block  h-10 w-full rounded-md border border py-px pl-10 text-sm outline-none ring-black focus-within:ring-1 disabled:opacity-50 dark:placeholder-gray-500 dark:selection:bg-green-500`}
       />
     </div>
   );
diff --git a/packages/ui/form/MultiSelectCheckboxes.tsx b/packages/ui/form/MultiSelectCheckboxes.tsx
index 47a0c13d4b..6df15b54fa 100644
--- a/packages/ui/form/MultiSelectCheckboxes.tsx
+++ b/packages/ui/form/MultiSelectCheckboxes.tsx
@@ -47,7 +47,7 @@ const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
       innerProps={props}>
       <input
         type="checkbox"
-        className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
+        className="text-primary-600 focus:ring-primary-500 border-default h-4 w-4 rounded ltr:mr-2 rtl:ml-2"
         checked={isSelected}
         readOnly
       />
diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index c66fdb2922..012ecb3aaf 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -25,11 +25,11 @@ function PhoneInput({ name, className = "", onChange, ...rest }: PhoneInputProps
       defaultCountry={defaultCountry}
       name={name}
       onChange={onChange}
-      countrySelectProps={{ className: "text-black" }}
+      countrySelectProps={{ className: "text-emphasis" }}
       numberInputProps={{
         className: "border-0 text-sm focus:ring-0 dark:bg-darkgray-100 dark:placeholder:text-darkgray-600",
       }}
-      className={`${className} focus-within:border-brand dark:bg-darkgray-100 dark:border-darkgray-300 block w-full rounded-md rounded-sm border border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500`}
+      className={`${className} focus-within:border-brand-default dark:bg-darkgray-100 dark:border-darkgray-300 border-default disabled:text-subtle disabled:dark:text-subtle dark:text-inverted block w-full rounded-md rounded-sm border border py-px pl-3 ring-black focus-within:ring-1 disabled:opacity-50 dark:selection:bg-green-500`}
     />
   );
 }
diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index b9b3b1d884..1acd5fea16 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -18,7 +18,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
       {...props}
       ref={ref}
       className={classNames(
-        "mt-1 block w-full rounded-sm border border-gray-300 py-2 px-3 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm",
+        "border-default mt-1 block w-full rounded-sm border py-2 px-3 shadow-sm focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm",
         props.className
       )}
     />
@@ -27,7 +27,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(pro
 
 export function Label(props: JSX.IntrinsicElements["label"]) {
   return (
-    <label {...props} className={classNames("block text-sm font-medium text-gray-700", props.className)}>
+    <label {...props} className={classNames("text-default block text-sm font-medium", props.className)}>
       {props.children}
     </label>
   );
@@ -35,7 +35,7 @@ export function Label(props: JSX.IntrinsicElements["label"]) {
 
 export function InputLeading(props: JSX.IntrinsicElements["div"]) {
   return (
-    <span className="inline-flex flex-shrink-0 items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm">
+    <span className="bg-muted border-default text-subtle inline-flex flex-shrink-0 items-center rounded-l-sm border border-r-0 px-3 sm:text-sm">
       {props.children}
     </span>
   );
@@ -146,7 +146,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        "block w-full rounded-sm border-gray-300 shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
+        "border-default block w-full rounded-sm shadow-sm focus:border-neutral-900 focus:ring-neutral-900 sm:text-sm",
         props.className
       )}
     />
@@ -246,7 +246,7 @@ export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
 
 export function FieldsetLegend(props: JSX.IntrinsicElements["legend"]) {
   return (
-    <legend {...props} className={classNames("text-sm font-medium text-gray-700", props.className)}>
+    <legend {...props} className={classNames("text-default text-sm font-medium", props.className)}>
       {props.children}
     </legend>
   );
@@ -256,7 +256,7 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
   return (
     <div
       {...props}
-      className={classNames("space-y-2 rounded-sm border border-gray-300 bg-white p-2", props.className)}>
+      className={classNames("bg-default border-default space-y-2 rounded-sm border p-2", props.className)}>
       {props.children}
     </div>
   );
diff --git a/packages/ui/form/radio-area/Radio.tsx b/packages/ui/form/radio-area/Radio.tsx
index e81a3d8719..cee683d08a 100644
--- a/packages/ui/form/radio-area/Radio.tsx
+++ b/packages/ui/form/radio-area/Radio.tsx
@@ -10,7 +10,7 @@ export const Radio = (props: RadioGroupPrimitive.RadioGroupItemProps & { childre
   <RadioGroupPrimitive.Item
     {...props}
     className={classNames(
-      "mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border border-gray-300 hover:bg-gray-100 focus:ring-2 focus:ring-gray-900",
+      "hover:bg-subtle border-default mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2 focus:ring-gray-900",
       props.disabled && "opacity-60"
     )}>
     {props.children}
@@ -19,8 +19,8 @@ export const Radio = (props: RadioGroupPrimitive.RadioGroupItemProps & { childre
 export const Indicator = ({ disabled }: { disabled?: boolean }) => (
   <RadioGroupPrimitive.Indicator
     className={classNames(
-      "relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:bg-white after:content-['']",
-      disabled ? "after:bg-gray-500" : "bg-black"
+      "after:bg-default relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:content-['']",
+      disabled ? "after:bg-muted0" : "bg-black"
     )}
   />
 );
@@ -29,8 +29,8 @@ export const Label = (props: JSX.IntrinsicElements["label"] & { disabled?: boole
   <label
     {...props}
     className={classNames(
-      "text-sm font-medium leading-5 text-gray-900 ltr:ml-2 rtl:mr-2 dark:text-white",
-      props.disabled && "text-gray-500"
+      "text-emphasis dark:text-inverted text-sm font-medium leading-5 ltr:ml-2 rtl:mr-2",
+      props.disabled && "text-subtle"
     )}
   />
 );
diff --git a/packages/ui/form/radio-area/RadioAreaGroup.tsx b/packages/ui/form/radio-area/RadioAreaGroup.tsx
index f67f33be56..ea4ed00b42 100644
--- a/packages/ui/form/radio-area/RadioAreaGroup.tsx
+++ b/packages/ui/form/radio-area/RadioAreaGroup.tsx
@@ -10,11 +10,11 @@ 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-gray-900 focus:ring-neutral-500"
+          className="text-emphasis peer absolute top-[0.9rem] left-3 align-baseline focus:ring-neutral-500"
           type="radio"
           {...props}
         />
-        <div className="peer-checked:border-brand rounded-md border p-4 pt-3 pl-10 focus:outline-none focus:ring focus:ring-neutral-500">
+        <div className="peer-checked:border-brand-default rounded-md border p-4 pt-3 pl-10 focus:outline-none focus:ring focus:ring-neutral-500">
           {children}
         </div>
       </label>
diff --git a/packages/ui/form/radio-area/Select.tsx b/packages/ui/form/radio-area/Select.tsx
index 4bd82a3adf..025235c462 100644
--- a/packages/ui/form/radio-area/Select.tsx
+++ b/packages/ui/form/radio-area/Select.tsx
@@ -42,11 +42,11 @@ export const Select = function RadioAreaSelect<TFieldValues extends FieldValues>
         type="button"
         disabled={disabled}
         className={classNames(
-          "focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border border-gray-300 bg-white p-2 text-left shadow-sm sm:text-sm",
-          disabled && "cursor-default bg-gray-200 focus:ring-0 "
+          "focus:ring-primary-500 border-default bg-default mb-1 block w-full cursor-pointer rounded-sm border border p-2 text-left shadow-sm sm:text-sm",
+          disabled && "bg-emphasis cursor-default focus:ring-0 "
         )}>
         {getLabel(props.value) ?? placeholder}
-        <ChevronDownIcon className="float-right h-5 w-5 text-gray-500" />
+        <ChevronDownIcon className="text-subtle float-right h-5 w-5" />
       </CollapsibleTrigger>
       <CollapsibleContent>
         <RadioAreaGroup className="space-y-2 text-sm" onChange={props.onChange}>