From 4b0d22655dbeb74d6715d5c719f1fbcda0b8e5f4 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Wed, 5 Apr 2023 19:14:46 +0100
Subject: [PATCH] Feat/tokens + darkmode + theme support (#7876)

---
 apps/storybook/components/VariantsTable.tsx   |    5 +-
 apps/storybook/styles/storybook-styles.css    |   85 ++
 apps/web/components/AddToHomescreen.tsx       |    4 +-
 apps/web/components/AppListCard.tsx           |    4 +-
 apps/web/components/Embed.tsx                 |   58 +-
 apps/web/components/ImageUploader.tsx         |    8 +-
 apps/web/components/NavTabs.tsx               |    8 +-
 apps/web/components/apps/App.tsx              |   48 +-
 .../components/apps/CalendarListContainer.tsx |   22 +-
 apps/web/components/auth/TwoFactor.tsx        |    2 +-
 .../components/auth/layouts/AdminLayout.tsx   |    2 +-
 .../availability/SkeletonLoader.tsx           |    4 +-
 .../booking/AvailableEventLocations.tsx       |    4 +-
 .../web/components/booking/AvailableTimes.tsx |   13 +-
 .../components/booking/BookingDescription.tsx |   21 +-
 .../components/booking/BookingListItem.tsx    |   30 +-
 apps/web/components/booking/CancelBooking.tsx |    9 +-
 .../web/components/booking/SkeletonLoader.tsx |    2 +-
 apps/web/components/booking/SlotPicker.tsx    |    2 +-
 apps/web/components/booking/TimeOptions.tsx   |    3 +-
 .../booking/pages/AvailabilityPage.tsx        |   39 +-
 .../components/booking/pages/BookingPage.tsx  |   26 +-
 .../components/dialog/EditLocationDialog.tsx  |   19 +-
 .../components/dialog/RescheduleDialog.tsx    |    6 +-
 apps/web/components/error/error-page.tsx      |   16 +-
 .../components/eventtype/AvailabilityTab.tsx  |   16 +-
 .../eventtype/CustomEventTypeModal.tsx        |   28 +-
 .../components/eventtype/EventAdvancedTab.tsx |   20 +-
 .../web/components/eventtype/EventAppsTab.tsx |    2 +-
 .../components/eventtype/EventLimitsTab.tsx   |   14 +-
 .../components/eventtype/EventSetupTab.tsx    |    8 +-
 .../web/components/eventtype/EventTeamTab.tsx |    2 +-
 .../eventtype/EventTypeSingleLayout.tsx       |   16 +-
 .../eventtype/RecurringEventController.tsx    |   10 +-
 .../RequiresConfirmationController.tsx        |  119 +-
 .../components/eventtype/SkeletonLoader.tsx   |    6 +-
 .../components/ConnectedCalendarItem.tsx      |    8 +-
 .../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        |   12 +-
 .../security/DisableTwoFactorModal.tsx        |    4 +-
 .../security/DisableUserImpersonation.tsx     |    4 +-
 .../security/EnableTwoFactorModal.tsx         |    4 +-
 .../security/TwoFactorAuthSection.tsx         |    4 +-
 .../security/TwoFactorModalHeader.tsx         |    6 +-
 .../components/settings/CalendarSwitch.tsx    |    2 +-
 .../settings/DisableTwoFactorModal.tsx        |    4 +-
 apps/web/components/setup/AdminUser.tsx       |    4 +-
 apps/web/components/setup/ChooseLicense.tsx   |   16 +-
 .../components/setup/EnterpriseLicense.tsx    |   12 +-
 apps/web/components/setup/StepDone.tsx        |    4 +-
 apps/web/components/team/screens/Team.tsx     |   11 +-
 apps/web/components/ui/AuthContainer.tsx      |    8 +-
 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 |   35 +-
 .../UsernameTextfield.tsx                     |   26 +-
 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 |    7 +-
 apps/web/components/ui/form/MinutesField.tsx  |    6 +-
 apps/web/lib/app-providers.tsx                |   60 +-
 apps/web/pages/404.tsx                        |   86 +-
 apps/web/pages/500.tsx                        |   14 +-
 apps/web/pages/[user].tsx                     |   57 +-
 apps/web/pages/[user]/[type].tsx              |   12 +-
 apps/web/pages/[user]/book.tsx                |   14 +-
 apps/web/pages/_document.tsx                  |    4 +-
 apps/web/pages/apps/[slug]/setup.tsx          |    2 +-
 apps/web/pages/apps/categories/[category].tsx |    4 +-
 apps/web/pages/apps/categories/index.tsx      |    6 +-
 apps/web/pages/apps/index.tsx                 |    6 +-
 apps/web/pages/apps/installed/[category].tsx  |    2 +-
 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/login.tsx                 |   18 +-
 apps/web/pages/auth/logout.tsx                |   12 +-
 apps/web/pages/auth/setup/index.tsx           |   10 +-
 apps/web/pages/auth/verify.tsx                |   10 +-
 apps/web/pages/availability/[schedule].tsx    |   20 +-
 apps/web/pages/availability/index.tsx         |    4 +-
 apps/web/pages/availability/troubleshoot.tsx  |   16 +-
 apps/web/pages/booking/[uid].tsx              |   92 +-
 apps/web/pages/bookings/[status].tsx          |   12 +-
 apps/web/pages/d/[link]/[slug].tsx            |    1 -
 apps/web/pages/d/[link]/book.tsx              |    2 -
 apps/web/pages/event-types/index.tsx          |   22 +-
 .../web/pages/getting-started/[[...step]].tsx |    4 +-
 apps/web/pages/insights/index.tsx             |    8 +-
 apps/web/pages/maintenance.tsx                |    8 +-
 apps/web/pages/more.tsx                       |    2 +-
 apps/web/pages/settings/billing/index.tsx     |    4 +-
 .../pages/settings/my-account/appearance.tsx  |   43 +-
 .../pages/settings/my-account/calendars.tsx   |   28 +-
 .../settings/my-account/conferencing.tsx      |    4 +-
 .../web/pages/settings/my-account/general.tsx |   12 +-
 .../web/pages/settings/my-account/profile.tsx |    8 +-
 .../pages/settings/security/impersonation.tsx |    4 +-
 apps/web/pages/settings/security/password.tsx |   10 +-
 .../settings/security/two-factor-auth.tsx     |    6 +-
 apps/web/pages/signup.tsx                     |   24 +-
 apps/web/pages/team/[slug].tsx                |   24 +-
 apps/web/pages/team/[slug]/[type].tsx         |    1 -
 apps/web/pages/team/[slug]/book.tsx           |    2 -
 apps/web/pages/video/meeting-ended/[uid].tsx  |   10 +-
 .../pages/video/meeting-not-started/[uid].tsx |    2 +-
 apps/web/styles/globals.css                   |  202 ++--
 packages/app-store/_components/AppCard.tsx    |   15 +-
 .../app-store/_components/AppSettings.tsx     |    2 +-
 .../applecalendar/pages/setup/index.tsx       |    6 +-
 .../caldavcalendar/pages/setup/index.tsx      |    6 +-
 .../app-store/closecom/pages/setup/index.tsx  |   10 +-
 packages/app-store/components.tsx             |    8 +-
 .../pages/setup/index.tsx                     |    6 +-
 .../pages/setup/index.tsx                     |    6 +-
 .../exchangecalendar/pages/setup/index.tsx    |    6 +-
 .../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            |    5 +-
 .../routing-forms/components/SingleForm.tsx   |   20 +-
 .../react-awesome-query-builder/styles.css    |    1 -
 .../react-awesome-query-builder/widgets.tsx   |   12 +-
 packages/app-store/routing-forms/config.json  |    4 +-
 .../pages/form-edit/[...appPages].tsx         |    1 +
 .../pages/forms/[...appPages].tsx             |   10 +-
 .../pages/reporting/[...appPages].tsx         |   36 +-
 .../pages/route-builder/[...appPages].tsx     |   12 +-
 .../pages/router/[...appPages].tsx            |    4 +-
 .../pages/routing-link/[...appPages].tsx      |   36 +-
 .../static/{icon.svg => icon-dark.svg}        |    0
 .../app-store/sendgrid/pages/setup/index.tsx  |   10 +-
 packages/app-store/sirius_video/config.json   |    4 +-
 .../static/{icon.svg => icon-dark.svg}        |    0
 .../components/EventTypeAppCardInterface.tsx  |    2 +-
 packages/app-store/typeform/config.json       |    2 +-
 .../pages/how-to-use/[...appPages].tsx        |   20 +-
 .../static/{icon.svg => icon-dark.svg}        |    0
 .../vital/components/AppConfiguration.tsx     |    2 +-
 packages/app-store/whereby/config.json        |    4 +-
 .../static/{icon.svg => icon-dark.svg}        |    0
 .../components/confirmDialog.tsx              |    4 +-
 packages/app-store/wordpress/config.json      |    4 +-
 .../app-store/wordpress/static/icon-dark.svg  |    1 +
 packages/app-store/wordpress/static/icon.svg  |    1 -
 .../zapier/components/TemplateCard.tsx        |    6 +-
 .../app-store/zapier/pages/setup/index.tsx    |   14 +-
 packages/config/tailwind-preset.js            |  146 +--
 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 +-
 .../embeds/embed-core/src/embed-iframe.ts     |    7 -
 packages/features/apps/AdminAppsList.tsx      |    2 +-
 .../bookings/components/EventTypeFilter.tsx   |    6 +-
 .../bookings/components/PeopleFilter.tsx      |   14 +-
 .../bookings/components/TeamFilter.tsx        |   22 +-
 packages/features/calendars/DatePicker.tsx    |   36 +-
 .../calendars/DestinationCalendarSelector.tsx |    6 +-
 .../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  |   14 +-
 .../ee/api-keys/components/ApiKeyListItem.tsx |    7 +-
 .../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    |   35 +-
 .../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 |   10 +-
 .../teams/components/CreateANewTeamForm.tsx   |    2 +
 .../components/DisableTeamImpersonation.tsx   |    4 +-
 .../components/MemberChangeRoleModal.tsx      |    9 +-
 .../components/MemberInvitationModal.tsx      |   10 +-
 .../ee/teams/components/MemberListItem.tsx    |   15 +-
 .../components/SkeletonloaderTeamList.tsx     |    2 +-
 .../components/TeamAvailabilityModal.tsx      |   17 +-
 .../components/TeamAvailabilityScreen.tsx     |   26 +-
 .../components/TeamAvailabilityTimes.tsx      |    8 +-
 .../ee/teams/components/TeamInviteList.tsx    |    2 +-
 .../teams/components/TeamInviteListItem.tsx   |   10 +-
 .../features/ee/teams/components/TeamList.tsx |    8 +-
 .../ee/teams/components/TeamListItem.tsx      |   10 +-
 .../features/ee/teams/components/TeamPill.tsx |    8 +-
 .../ee/teams/components/TeamsListing.tsx      |    6 +-
 .../components/v2/TeamAvailabilityModal.tsx   |    5 +-
 .../components/v2/TeamAvailabilityScreen.tsx  |   26 +-
 .../components/v2/TeamAvailabilityTimes.tsx   |    6 +-
 .../ee/teams/pages/team-appearance-view.tsx   |   28 +-
 .../ee/teams/pages/team-billing-view.tsx      |    2 +-
 .../ee/teams/pages/team-members-view.tsx      |    6 +-
 .../ee/teams/pages/team-profile-view.tsx      |   18 +-
 .../ee/video/ViewRecordingsDialog.tsx         |    4 +-
 .../components/RecordingListItemSkeleton.tsx  |    2 +-
 .../components/UpgradeRecordingBanner.tsx     |    2 +-
 .../ee/workflows/components/EmptyScreen.tsx   |   14 +-
 .../components/EventWorkflowsTab.tsx          |   14 +-
 .../SkeletonLoaderEventWorkflowsTab.tsx       |    4 +-
 .../components/SkeletonLoaderList.tsx         |    2 +-
 .../components/WorkflowDetailsPage.tsx        |   10 +-
 .../workflows/components/WorkflowListPage.tsx |   10 +-
 .../components/WorkflowStepContainer.tsx      |   52 +-
 .../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 |   22 +-
 .../features/form-builder/FormBuilder.tsx     |   24 +-
 .../components/AverageEventDurationChart.tsx  |    7 +-
 .../components/BookingStatusLineChart.tsx     |    9 +-
 .../features/insights/components/Card.tsx     |    2 +-
 .../features/insights/components/KPICard.tsx  |    6 +-
 .../LeastBookedTeamMembersTable.tsx           |    2 +-
 .../insights/components/LineChart.tsx         |   12 +
 .../components/MostBookedTeamMembersTable.tsx |    2 +-
 .../components/PopularEventsTable.tsx         |    8 +-
 .../components/TotalBookingUsersTable.tsx     |    4 +-
 .../insights/components/tremor.types.ts       |   49 +
 .../features/insights/filters/DateSelect.css  |   15 +-
 .../features/insights/filters/FilterType.tsx  |    4 +-
 packages/features/kbar/Kbar.tsx               |   25 +-
 .../components/DateOverrideInputDialog.tsx    |    6 +-
 .../schedules/components/DateOverrideList.tsx |   12 +-
 .../schedules/components/Schedule.tsx         |   24 +-
 .../schedules/components/ScheduleListItem.tsx |   12 +-
 packages/features/settings/ThemeLabel.tsx     |    4 +-
 .../settings/layouts/SettingsLayout.tsx       |   48 +-
 packages/features/shell/Shell.tsx             |   84 +-
 packages/features/tips/UpgradeTip.tsx         |   10 +-
 .../users/components/UserV2OptInBanner.tsx    |    4 +-
 .../webhooks/components/WebhookForm.tsx       |   22 +-
 .../webhooks/components/WebhookListItem.tsx   |    2 +-
 .../components/WebhookListItemSkeleton.tsx    |    2 +-
 .../components/WebhookListSkeleton.tsx        |    2 +-
 .../components/WebhookTestDisclosure.tsx      |   14 +-
 .../webhooks/pages/webhook-new-view.tsx       |    3 +-
 packages/lib/CustomBranding.test.tsx          |  155 ---
 packages/lib/CustomBranding.tsx               |  318 -----
 packages/lib/OgImages.tsx                     |   10 +-
 packages/lib/getBrandColours.test.ts          |   39 +
 packages/lib/getBrandColours.tsx              |  197 ++++
 packages/lib/hooks/useTheme.tsx               |    4 +
 packages/ui/components/alert/Alert.tsx        |   11 +-
 packages/ui/components/apps/AllApps.tsx       |   22 +-
 packages/ui/components/apps/AppCard.tsx       |   27 +-
 packages/ui/components/apps/Categories.tsx    |   15 +-
 .../ui/components/apps/SkeletonLoader.tsx     |    4 +-
 packages/ui/components/apps/Slider.tsx        |    4 +-
 packages/ui/components/avatar/Avatar.tsx      |    6 +-
 packages/ui/components/avatar/AvatarGroup.tsx |    4 +-
 packages/ui/components/badge/Badge.tsx        |   18 +-
 .../ui/components/breadcrumb/Breadcrumb.tsx   |    2 +-
 packages/ui/components/button/Button.tsx      |   53 +-
 .../ui/components/button/LinkIconButton.tsx   |    4 +-
 .../ui/components/button/button.stories.mdx   |    2 +-
 packages/ui/components/card/Card.tsx          |   20 +-
 packages/ui/components/card/FormCard.tsx      |   10 +-
 packages/ui/components/card/StepCard.tsx      |    2 +-
 packages/ui/components/credits/Credits.tsx    |    2 +-
 .../dialog/ConfirmationDialogContent.tsx      |   10 +-
 packages/ui/components/dialog/Dialog.tsx      |   10 +-
 packages/ui/components/divider/Divider.tsx    |    6 +-
 .../ui/components/divider/divider.stories.mdx |    4 +-
 packages/ui/components/editor/Editor.tsx      |    2 +-
 .../editor/plugins/AddVariablesDropdown.tsx   |    6 +-
 .../editor/plugins/ToolbarPlugin.tsx          |   51 +-
 .../ui/components/editor/stylesEditor.css     |   50 +-
 .../components/empty-screen/EmptyScreen.tsx   |   12 +-
 .../ui/components/form/checkbox/Checkbox.tsx  |    8 +-
 .../form/checkbox/MultiSelectCheckboxes.tsx   |    2 +-
 .../form/color-picker/colorpicker.tsx         |    6 +-
 .../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  |   30 +-
 packages/ui/components/form/inputs/Label.tsx  |    2 +-
 packages/ui/components/form/select/Select.tsx |   41 +-
 .../ui/components/form/select/components.tsx  |    2 +-
 .../form/selectimproved/components/Item.tsx   |   22 +-
 .../selectimproved/components/Options.tsx     |    2 +-
 .../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    |    6 +-
 .../components/form/switch/SettingsToggle.tsx |    4 +-
 packages/ui/components/form/switch/Switch.tsx |   14 +-
 .../form/timezone-select/TimezoneSelect.tsx   |   54 +-
 .../form/toggleGroup/BooleanToggleGroup.tsx   |    8 +-
 .../form/toggleGroup/ToggleGroup.tsx          |    8 +-
 .../ui/components/form/wizard/WizardForm.tsx  |    4 +-
 .../image-uploader/ImageUploader.tsx          |   16 +-
 .../ui/components/layout/ShellSubHeading.tsx  |    4 +-
 .../ui/components/layout/spacing.stories.mdx  |   20 +-
 packages/ui/components/list/List.tsx          |   17 +-
 packages/ui/components/logo/Logo.tsx          |    2 +-
 .../navigation/tabs/HorizontalTabItem.tsx     |    4 +-
 .../navigation/tabs/VerticalTabItem.tsx       |    6 +-
 .../ui/components/popover/AnimatedPopover.tsx |    4 +-
 .../popover/MeetingTimeInTimezones.tsx        |    6 +-
 packages/ui/components/skeleton/Loader.tsx    |    2 +-
 packages/ui/components/skeleton/index.tsx     |   11 +-
 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               |    6 +-
 packages/ui/form/fields.tsx                   |   12 +-
 packages/ui/form/radio-area/Radio.tsx         |   17 +-
 .../ui/form/radio-area/RadioAreaGroup.tsx     |    4 +-
 packages/ui/form/radio-area/Select.tsx        |    6 +-
 packages/ui/index.tsx                         |    1 +
 packages/ui/styles/useCalcomTheme.tsx         |   28 +
 yarn.lock                                     | 1025 ++++++-----------
 345 files changed, 3016 insertions(+), 3150 deletions(-)
 rename packages/app-store/routing-forms/static/{icon.svg => icon-dark.svg} (100%)
 rename packages/app-store/sirius_video/static/{icon.svg => icon-dark.svg} (100%)
 rename packages/app-store/typeform/static/{icon.svg => icon-dark.svg} (100%)
 rename packages/app-store/whereby/static/{icon.svg => icon-dark.svg} (100%)
 create mode 100644 packages/app-store/wordpress/static/icon-dark.svg
 delete mode 100644 packages/app-store/wordpress/static/icon.svg
 create mode 100644 packages/config/theme/colors.css
 create mode 100644 packages/config/theme/generateColor.ts
 create mode 100644 packages/config/theme/interfaces.ts
 create mode 100644 packages/features/insights/components/LineChart.tsx
 create mode 100644 packages/features/insights/components/tremor.types.ts
 delete mode 100644 packages/lib/CustomBranding.test.tsx
 delete mode 100644 packages/lib/CustomBranding.tsx
 create mode 100644 packages/lib/getBrandColours.test.ts
 create mode 100644 packages/lib/getBrandColours.tsx
 create mode 100644 packages/ui/styles/useCalcomTheme.tsx

diff --git a/apps/storybook/components/VariantsTable.tsx b/apps/storybook/components/VariantsTable.tsx
index 781b74f92a..30b136777e 100644
--- a/apps/storybook/components/VariantsTable.tsx
+++ b/apps/storybook/components/VariantsTable.tsx
@@ -1,4 +1,5 @@
-import React, { ReactElement, ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
+import React from "react";
 
 import { classNames } from "@calcom/lib";
 
@@ -42,7 +43,7 @@ export function VariantsTable({
         </table>
       </div>
       {!isDark && (
-        <div data-mode="dark">
+        <div data-mode="dark" className="dark">
           <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
             {children}
           </VariantsTable>
diff --git a/apps/storybook/styles/storybook-styles.css b/apps/storybook/styles/storybook-styles.css
index d141252654..a5cc2aa8d1 100644
--- a/apps/storybook/styles/storybook-styles.css
+++ b/apps/storybook/styles/storybook-styles.css
@@ -193,3 +193,88 @@
 .docs-story {
   padding: 24px !important;
 }
+
+@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;
+  }
+  .dark {
+    /* background */
+
+    --cal-bg-emphasis: #2B2B2B;
+    --cal-bg: #101010;
+    --cal-bg-subtle: #2B2B2B;
+    --cal-bg-muted: #1C1C1C;
+    --cal-bg-inverted: #F3F4F6;
+
+    /* background -> components*/
+    --cal-bg-info: #DEE9FC;
+    --cal-bg-success: #E2FBE8;
+    --cal-bg-attention: #FCEED8;
+    --cal-bg-error: #F9E3E2;
+
+
+    /* Borders */
+    --cal-border-emphasis: #575757;
+    --cal-border: #444444;
+    --cal-border-subtle: #2B2B2B;
+    --cal-border-muted: #1C1C1C;
+
+    /* Content/Text */
+    --cal-text-emphasis: #F3F4F6;
+    --cal-text: #D6D6D6;
+    --cal-text-subtle: #757575;
+    --cal-text-muted: #575757;
+    --cal-text-inverted: #101010;
+
+    /* Content/Text -> components */
+    --cal-text-info: #253985;
+    --cal-text-success: #285231;
+    --cal-text-attention: #73321B;
+    --cal-text-error: #752522;
+
+    /* Brand shenanigans
+      -> These will be computed for the users theme at runtime.
+    */
+    --cal-brand: #111827;
+    --cal-brand-emphasis: #101010;
+  }
+}
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/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index bcef3310a3..b1d9eebb48 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -63,12 +63,12 @@ export default function AppListCard(props: AppListCardProps) {
   }, []);
 
   return (
-    <div className={`${highlight ? "bg-yellow-100" : ""}`}>
+    <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
       <div className="flex gap-x-3 px-5 py-4">
         {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/Embed.tsx b/apps/web/components/Embed.tsx
index 8112a38847..c8dea57ce6 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -509,7 +509,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>
@@ -517,7 +517,7 @@ const tabs = [
             data-testid="embed-code"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
             name="embed-code"
-            className="h-[calc(100%-50px)] font-mono"
+            className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
             style={{ resize: "none", overflow: "auto" }}
             readOnly
             value={
@@ -534,7 +534,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."
             )}
@@ -561,12 +561,12 @@ ${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>}
             name="embed-react"
-            className="h-[calc(100%-50px)] font-mono"
+            className="text-default bg-default selection:bg-subtle h-[calc(100%-50px)] font-mono"
             readOnly
             style={{ resize: "none", overflow: "auto" }}
             value={`/* First make sure that you have installed the package */
@@ -622,7 +622,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>
   );
@@ -634,17 +634,17 @@ const ChooseEmbedTypesDialogContent = () => {
   return (
     <DialogContent className="rounded-lg p-10" type="creation" size="lg">
       <div className="mb-2">
-        <h3 className="mb-2 text-2xl font-bold leading-none text-gray-900" id="modal-title">
+        <h3 className="font-cal text-emphasis mb-2 text-2xl font-bold leading-none" 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">
+      <div className="items-start space-y-2 md:flex md:space-y-0">
         {embeds.map((embed, index) => (
           <button
-            className="hover:border-primary-900 w-1/3 rounded-md border border-gray-200 bg-gray-50 p-6 text-left hover:rounded-md hover:bg-gray-100 ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0"
+            className="hover:bg-subtle bg-muted w-full rounded-md border border-transparent p-6 text-left hover:rounded-md ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0 lg:w-1/3"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -652,11 +652,11 @@ const ChooseEmbedTypesDialogContent = () => {
                 embedType: embed.type,
               });
             }}>
-            <div className="order-none box-border flex-none rounded-md border border-solid bg-white">
+            <div className="bg-default order-none box-border flex-none rounded-md border border-solid dark:bg-transparent dark:invert">
               {embed.illustration}
             </div>
-            <div className="mt-4 font-semibold leading-none text-gray-900">{embed.title}</div>
-            <p className="mt-2 text-sm text-gray-500">{embed.subtitle}</p>
+            <div className="text-emphasis mt-4 font-semibold">{embed.title}</div>
+            <p className="text-subtle mt-2 text-sm">{embed.subtitle}</p>
           </button>
         ))}
       </div>
@@ -821,9 +821,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
       enableOverflow
       type="creation">
       <div className="flex">
-        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
+        <div className="bg-muted flex w-1/3 flex-col p-8">
           <h3
-            className="mb-2.5 flex items-center text-xl font-semibold leading-5 text-gray-900"
+            className="text-emphasis mb-2.5 flex items-center text-xl font-semibold leading-5"
             id="modal-title">
             <button
               className="h-6 w-6"
@@ -834,7 +834,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </button>
             {embed.title}
           </h3>
-          <h4 className="mb-6 text-sm font-normal text-gray-500">{embed.subtitle}</h4>
+          <h4 className="text-emphasis mb-6 text-sm font-normal">{embed.subtitle}</h4>
           <div className="flex flex-col">
             <div className={classNames("font-medium", embedType === "element-click" ? "hidden" : "")}>
               <Collapsible
@@ -843,7 +843,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 <CollapsibleContent className="text-sm">
                   <div className={classNames(embedType === "inline" ? "block" : "hidden")}>
                     {/*TODO: Add Auto/Fixed toggle from Figma */}
-                    <div className="mb-[9px] text-sm">Window sizing</div>
+                    <div className="text-default mb-[9px] text-sm">Window sizing</div>
                     <div className="justify-left flex items-center !font-normal">
                       <div className="mr-[9px]">
                         <TextField
@@ -893,7 +893,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <div
                     className={classNames(
                       "mt-4 items-center justify-between",
-                      embedType === "floating-popup" ? "" : "hidden"
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
                     )}>
                     <div className="mb-2 text-sm">Button Text</div>
                     {/* Default Values should come from preview iframe */}
@@ -917,7 +917,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <div
                     className={classNames(
                       "mt-4 flex items-center justify-start",
-                      embedType === "floating-popup" ? "space-x-2 rtl:space-x-reverse" : "hidden"
+                      embedType === "floating-popup"
+                        ? "text-emphasis space-x-2 rtl:space-x-reverse"
+                        : "hidden"
                     )}>
                     <Switch
                       defaultChecked={true}
@@ -933,12 +935,12 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         });
                       }}
                     />
-                    <div className="text-sm">Display Calendar Icon Button</div>
+                    <div className="text-default text-sm">Display Calendar Icon Button</div>
                   </div>
                   <div
                     className={classNames(
                       "mt-4 items-center justify-between",
-                      embedType === "floating-popup" ? "" : "hidden"
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
                     )}>
                     <div className="mb-2">Position of Button</div>
                     <Select
@@ -957,7 +959,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       options={FloatingPopupPositionOptions}
                     />
                   </div>
-                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                  <div
+                    className={classNames(
+                      "mt-4",
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
+                    )}>
                     <div>Button Color</div>
                     <div className="w-full">
                       <ColorPicker
@@ -978,7 +984,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       />
                     </div>
                   </div>
-                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                  <div
+                    className={classNames(
+                      "mt-4",
+                      embedType === "floating-popup" ? "text-emphasis" : "hidden"
+                    )}>
                     <div>Text Color</div>
                     <div className="w-full">
                       <ColorPicker
@@ -1020,7 +1030,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                           });
                         }}
                       />
-                      <div className="text-sm">{t("hide_eventtype_details")}</div>
+                      <div className="text-default text-sm">{t("hide_eventtype_details")}</div>
                     </div>
                     {[
                       { name: "brandColor", title: "Brand Color" },
diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx
index 9bc0b51cce..d4c133154c 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 focus:ring-empthasis mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 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 c3edf0d8f2..f92e0fda40 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"
@@ -91,7 +91,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
           );
         })}
       </nav>
-      <hr />
+      <hr className="border-subtle" />
     </>
   );
 };
diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index 9abf18688d..b6dd200f3f 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -96,7 +96,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">
       {hasDescriptionItems && (
-        <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">
           {descriptionItems ? (
             descriptionItems.map((descriptionItem, index) =>
               typeof descriptionItem === "object" ? (
@@ -127,13 +127,17 @@ const Component = ({
         <div className="mb-8 flex pt-4">
           <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>
+              <img
+                className={classNames(logo.includes("-dark") && "dark:invert", "min-h-16 min-w-16 h-16 w-16")}
+                src={logo}
+                alt={name}
+              />
+              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
             </div>
-            <h2 className="text-sm font-medium text-gray-600">
+            <h2 className="text-default text-sm font-medium">
               <Link
                 href={`categories/${categories[0]}`}
-                className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">
+                className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
                 {categories[0]}
               </Link>{" "}
               • {t("published_by", { author })}
@@ -243,9 +247,11 @@ const Component = ({
           </span>
         )}
 
-        <div className="prose-sm prose mt-8">{body}</div>
-        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
-        <span>
+        <div className="prose-sm prose prose-headings:text-emphasis prose-code:text-default text-default mt-8">
+          {body}
+        </div>
+        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
+        <span className="text-default">
           {price === 0 ? (
             t("free_to_use_apps")
           ) : (
@@ -260,16 +266,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>
@@ -279,9 +285,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>
@@ -291,9 +297,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>
@@ -304,9 +310,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>
@@ -316,16 +322,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">
+        <hr className="border-subtle my-8 border" />
+        <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..03488e1a0f 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 text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal 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">
+                    <div className="border-subtle border-t">
                       {!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,18 +279,18 @@ 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 border-subtle flex justify-between rounded-md border 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">
-                          <FiCalendar className="h-8 w-8" strokeWidth="1" />
+                        <div className="bg-default border-subtle relative rounded-md border p-1.5">
+                          <FiCalendar className="text-default 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>
                         <div className="md:w-6/12">
-                          <h1 className="text-sm font-semibold">{t("create_events_on")}</h1>
-                          <p className="text-sm font-normal">{t("set_calendar")}</p>
+                          <h1 className="text-emphasis text-sm font-semibold">{t("create_events_on")}</h1>
+                          <p className="text-default text-sm font-normal">{t("set_calendar")}</p>
                         </div>
                         <div className="justify-end md:w-6/12">
                           <DestinationCalendarSelector
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/auth/layouts/AdminLayout.tsx b/apps/web/components/auth/layouts/AdminLayout.tsx
index 6d992b687d..590ad37611 100644
--- a/apps/web/components/auth/layouts/AdminLayout.tsx
+++ b/apps/web/components/auth/layouts/AdminLayout.tsx
@@ -26,7 +26,7 @@ export default function AdminLayout({
   const isAppsPage = router.asPath.startsWith("/settings/admin/apps");
   return (
     <SettingsLayout {...rest}>
-      <div className="mx-auto flex max-w-4xl flex-row divide-y divide-gray-200">
+      <div className="divide-subtle mx-auto flex max-w-4xl flex-row divide-y">
         <div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
           <ErrorBoundary>{children}</ErrorBoundary>
         </div>
diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index 374bb7a798..9e9abf14c4 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="divide-subtle border-subtle bg-default animate-pulse divide-y rounded-md border sm:mx-0 sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
@@ -43,7 +43,7 @@ export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
   return (
     <li
       className={classNames(
-        "group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3",
+        "border-subtle group flex w-full items-center justify-between rounded-sm border px-[10px] py-3",
         className
       )}>
       <div className="flex-grow truncate text-sm">
diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx
index 1d459f8dbc..0474a3d952 100644
--- a/apps/web/components/booking/AvailableEventLocations.tsx
+++ b/apps/web/components/booking/AvailableEventLocations.tsx
@@ -41,7 +41,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
     return (
       <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
         {eventLocationType.iconUrl === "/link.svg" ? (
-          <FiLink className="dark:text-darkgray-600 min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
+          <FiLink className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
         ) : (
           <img
             src={eventLocationType.iconUrl}
@@ -61,7 +61,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
 
   const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
   return filteredLocations.length ? (
-    <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
+    <div className="text-default mr-6 flex w-full flex-col space-y-4 break-words text-sm">
       {filteredLocations}
     </div>
   ) : null;
diff --git a/apps/web/components/booking/AvailableTimes.tsx b/apps/web/components/booking/AvailableTimes.tsx
index 77dc015639..07b4a8fc1d 100644
--- a/apps/web/components/booking/AvailableTimes.tsx
+++ b/apps/web/components/booking/AvailableTimes.tsx
@@ -66,13 +66,13 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   return (
     <div ref={slotPickerRef}>
       {!!date ? (
-        <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
+        <div className="mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
           <div className="mb-4 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-emphasis font-semibold">
                 {nameOfDay(i18n.language, Number(date.format("d")), "short")}
               </span>
-              <span className="text-bookinglight">
+              <span className="text-subtle">
                 , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
               </span>
             </div>
@@ -132,7 +132,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     {seatsPerTimeSlot && slot.attendees && (slotFull || notEnoughSeats) ? (
                       <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-default bg-default border-subtle mb-2 block rounded-sm border py-2 font-medium opacity-25",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}>
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
@@ -147,8 +147,7 @@ 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",
+                          " bg-default dark:bg-muted border-default hover:bg-subtle hover:border-brand-default text-emphasis mb-2 block rounded-md border py-2 text-sm font-medium",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}
                         data-testid="time">
@@ -174,7 +173,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="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 7d5900e06a..75d98b9051 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -83,30 +83,25 @@ const BookingDescription: FC<Props> = (props) => {
         size="sm"
         truncateAfter={3}
       />
-      <h2 className="mt-1 mb-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 leading-none text-gray-900">
+      <h2 className="text-default mt-1 mb-2 break-words text-sm font-medium ">{profile.name}</h2>
+      <h1 className="font-cal  text-emphasis mb-6 break-words text-2xl font-semibold leading-none">
         {eventType.title}
       </h1>
-      <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
+      <div className=" text-default flex flex-col space-y-4 text-sm font-medium">
         {eventType?.description && (
           <div
             className={classNames(
               "scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
-              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
+              isBookingPage && "text-default text-sm font-medium"
             )}>
+            {/* TODO: Fix colors when token is introdcued to DS */}
             <div className="max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
               <EventTypeDescriptionSafeHTML eventType={eventType} />
             </div>
           </div>
         )}
         {requiresConfirmation && (
-          <div
-            className={classNames(
-              "items-top flex",
-              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
-            )}>
+          <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
             <div>
               <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
@@ -119,7 +114,7 @@ const BookingDescription: FC<Props> = (props) => {
         <div
           className={classNames(
             "flex flex-nowrap text-sm font-medium",
-            isBookingPage && "dark:text-darkgray-600 text-gray-600",
+            isBookingPage && "text-default",
             !eventType.metadata?.multipleDuration && "items-center"
           )}>
           <FiClock
@@ -138,7 +133,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 cde2b280c5..9e8dea8692 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -271,7 +271,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}
@@ -292,13 +292,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
@@ -325,7 +325,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>
             )}
@@ -335,8 +335,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
@@ -365,7 +365,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>
             )}
@@ -375,7 +375,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}
@@ -389,7 +389,7 @@ function BookingListItem(booking: BookingItemProps) {
             </div>
             {booking.description && (
               <div
-                className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 truncate text-sm text-gray-600"
+                className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 text-default truncate text-sm"
                 title={booking.description}>
                 &quot;{booking.description}&quot;
               </div>
@@ -413,7 +413,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}
@@ -475,10 +475,10 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                   </p>
                 );
               })}>
-              <div className="text-gray-600 dark:text-white">
+              <div className="text-default">
                 <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
@@ -551,13 +551,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 796af23ad1..e9a402d433 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -47,11 +47,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>
@@ -59,13 +59,13 @@ 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-default font-medium">{t("cancellation_reason")}</label>
           <TextArea
             ref={cancelBookingRef}
             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="mt-2 mb-4 w-full "
             rows={3}
           />
           <div className="flex flex-col-reverse rtl:space-x-reverse ">
@@ -77,7 +77,6 @@ export default function CancelBooking(props: Props) {
                 {t("nevermind")}
               </Button>
               <Button
-                className="dark:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkmodebrandcontrast bg-brand hover:border-brand text-brandcontrast flex justify-center"
                 data-testid="cancel"
                 onClick={async () => {
                   setLoading(true);
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index 3ed1e22537..518798006d 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="divide-subtle border-subtle bg-default animate-pulse divide-y rounded-md border sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
diff --git a/apps/web/components/booking/SlotPicker.tsx b/apps/web/components/booking/SlotPicker.tsx
index 6d8d2867fa..984c4586ab 100644
--- a/apps/web/components/booking/SlotPicker.tsx
+++ b/apps/web/components/booking/SlotPicker.tsx
@@ -164,7 +164,7 @@ export const SlotPicker = ({
         isLoading={isLoading}
         className={classNames(
           "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
-          selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
+          selectedDate ? " border-subtle sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
         )}
         includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
         locale={isLocaleReady ? i18n.language : "en"}
diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index 3944f52337..401497a1b0 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -27,7 +27,8 @@ const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
     <TimezoneSelect
       id="timeZone"
       classNames={{
-        singleValue: () => "dark:text-darkgray-600 text-gray-600",
+        singleValue: () => "text-default",
+        dropdownIndicator: () => "text-default",
         menu: () => "!w-64 max-w-[90vw]",
       }}
       variant="minimal"
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 557dd01481..0effbe9997 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -14,8 +14,8 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -24,7 +24,7 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc";
-import { HeadSeo } from "@calcom/ui";
+import { HeadSeo, useCalcomTheme } from "@calcom/ui";
 import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
@@ -58,12 +58,24 @@ const dateQuerySchema = z.object({
 
 export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
 
+const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor: string; darkBrandColor: string }) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+};
+
 const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
   const router = useRouter();
   const isEmbed = useIsEmbed(restProps.isEmbed);
   const query = dateQuerySchema.parse(router.query);
   const { rescheduleUid } = query;
   useTheme(profile.theme);
+  useBrandColors({
+    brandColor: profile.brandColor,
+    darkBrandColor: profile.darkBrandColor,
+  });
   const { t } = useLocale();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
   //TODO: Plan to remove shouldAlignCentrallyInEmbed config
@@ -157,30 +169,27 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
         isBrandingHidden={restProps.isBrandingHidden}
       />
       <BookingPageTagManager eventType={eventType} />
-      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
       <div>
         <main
           className={classNames(
             "flex flex-col md:mx-4",
             shouldAlignCentrally ? "items-center" : "items-start",
-            !isEmbed && classNames("mx-auto my-0 ease-in-out md:my-24")
+            !isEmbed && classNames("bg-subtle dark:bg-default mx-auto my-0 ease-in-out md:my-24")
           )}>
           <div>
             <div
               style={availabilityDatePickerEmbedStyles}
               className={classNames(
-                isBackgroundTransparent
-                  ? ""
-                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
-                "border-bookinglightest md:rounded-md md:border",
+                isBackgroundTransparent ? "" : "bg-default dark:bg-muted pb-4 md:pb-0",
+                "border-subtle md:rounded-md md:border",
                 isEmbed && "mx-auto"
               )}>
               <div className="md:flex">
                 {showEventTypeDetails && (
                   <div
                     className={classNames(
-                      "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
-                      "min-w-full md:w-[280px] md:min-w-[280px]",
+                      " border-subtle flex flex-col p-5 sm:border-r",
+                      "min-w-full md:w-[230px] md:min-w-[230px]",
                       recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
                     )}>
                     <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
@@ -188,7 +197,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                         <div
                           className={classNames(
                             "flex flex-nowrap items-center text-sm font-medium",
-                            "dark:text-darkgray-600 text-gray-600",
+                            " text-default",
                             "ltr:mr-[10px] rtl:ml-[10px]"
                           )}>
                           <FiUser
@@ -211,7 +220,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 border-default bg-default dark:border-empthasis h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
@@ -243,12 +252,12 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                     {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
-                        className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
+                        className="mt-4 mb-3 text-default"
                         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 ">
+                        <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 f1b2b308fb..e68bf27033 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -30,9 +30,9 @@ import getBookingResponsesSchema, {
   getBookingResponsesPartialSchema,
 } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
 import { FormBuilderField } from "@calcom/features/form-builder/FormBuilder";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { APP_NAME } from "@calcom/lib/constants";
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
@@ -40,7 +40,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { TimeFormat } from "@calcom/lib/timeFormat";
-import { Button, Form, Tooltip } from "@calcom/ui";
+import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
 import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
@@ -64,6 +64,14 @@ const BookingDescriptionPayment = dynamic(
   () => import("@components/booking/BookingDescriptionPayment")
 ) as unknown as typeof import("@components/booking/BookingDescriptionPayment").default;
 
+const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+};
+
 type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
 const BookingFields = ({
   fields,
@@ -303,6 +311,10 @@ const BookingPage = ({
   } = useTypedQuery(routerQuerySchema);
 
   useTheme(profile.theme);
+  useBrandColors({
+    brandColor: profile.brandColor,
+    darkBrandColor: profile.darkBrandColor,
+  });
 
   const querySchema = getBookingResponsesPartialSchema({
     eventType: {
@@ -512,7 +524,6 @@ const BookingPage = ({
         <link rel="icon" href="/favico.ico" />
       </Head>
       <BookingPageTagManager eventType={eventType} />
-      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
       <main
         className={classNames(
           shouldAlignCentrally ? "mx-auto" : "",
@@ -522,16 +533,16 @@ 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">
             {showEventTypeDetails && (
-              <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
+              <div className="sm:dark:border-darkgray-300  text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
                 <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 text-default items-start text-sm font-medium">
                       <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({
@@ -560,7 +571,7 @@ const BookingPage = ({
                             content={recurringStrings.slice(5).map((timeFormatted, key) => (
                               <p key={key}>{timeFormatted}</p>
                             ))}>
-                            <p className="dark:text-darkgray-600 text-sm">
+                            <p className=" text-sm">
                               + {t("plus_more", { count: recurringStrings.length - 5 })}
                             </p>
                           </Tooltip>
@@ -637,7 +648,6 @@ const BookingPage = ({
                   </Button>
                   <Button
                     type="submit"
-                    className="dark:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkmodebrandcontrast bg-brand hover:border-brand text-brandcontrast"
                     data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                     loading={mutation.isLoading || recurringMutation.isLoading}>
                     {rescheduleUid ? t("reschedule") : t("confirm")}
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index d680371cef..f3ff204fd7 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -164,7 +164,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">
@@ -174,6 +174,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
+              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
@@ -182,7 +183,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             <ErrorMessage
               errors={locationFormMethods.formState.errors}
               name={eventLocationType.variable}
-              className="mt-1 text-sm text-red-500"
+              className="text-error mt-1 text-sm"
               as="p"
             />
           </div>
@@ -208,7 +209,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
         </div>
       );
     } else {
-      return <p className="text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
+      return <p className="text-default text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
     }
   })();
 
@@ -216,16 +217,16 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={(open) => setShowLocationModal(open)}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
-          <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-            <FiMapPin className="text-primary-600 h-6 w-6" />
+          <div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
+            <FiMapPin className="text-emphasis h-6 w-6" />
           </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-default 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">
@@ -240,8 +241,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..b394191129 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="border-t border-gray-200 px-4 py-5 sm:p-0">
-        <dl className="sm:divide-y sm:divide-gray-200">
+    <div className="bg-default overflow-hidden shadow sm:rounded-lg">
+      <div className="border-subtle border-t px-4 py-5 sm:p-0">
+        <dl className="sm:divide-subtle sm:divide-y">
           {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 cf784a76ee..24526edb6c 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -120,7 +120,7 @@ const EventTypeScheduleDetails = () => {
     schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
 
   return (
-    <div className="space-y-4 rounded border px-6 pb-4">
+    <div className="border-default space-y-4 rounded border px-6 pb-4">
       <ol className="table border-collapse text-sm">
         {weekdayNames(i18n.language, 1, "long").map((day, index) => {
           const isAvailable = !!filterDays(index).length;
@@ -128,8 +128,8 @@ const EventTypeScheduleDetails = () => {
             <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"
+                  "w-20 font-medium sm:w-32 ",
+                  !isAvailable ? "text-subtle line-through" : "text-default"
                 )}>
                 {day}
               </span>
@@ -138,7 +138,7 @@ const EventTypeScheduleDetails = () => {
               ) : isAvailable ? (
                 <div className="space-y-3 text-right">
                   {filterDays(index).map((dayRange, i) => (
-                    <div key={i} className="flex items-center leading-4">
+                    <div key={i} className="text-default flex items-center leading-4">
                       <span className="w-16 sm:w-28 sm:text-left">
                         {format(dayRange.startTime, timeFormat === 12)}
                       </span>
@@ -148,15 +148,15 @@ const EventTypeScheduleDetails = () => {
                   ))}
                 </div>
               ) : (
-                <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
+                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
               )}
             </li>
           );
         })}
       </ol>
-      <hr />
+      <hr className="border-subtle" />
       <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-        <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
+        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
           <FiGlobe className="ltr:mr-2 rtl:ml-2" />
           {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
         </span>
@@ -194,7 +194,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..1413364dfb 100644
--- a/apps/web/components/eventtype/CustomEventTypeModal.tsx
+++ b/apps/web/components/eventtype/CustomEventTypeModal.tsx
@@ -58,35 +58,35 @@ 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-subtle 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-subtle 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-subtle 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-subtle 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>
         <div
-          className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
+          className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center dark:invert"
           style={{
             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>
-              <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</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="text-default ml-1.5 text-[10px] font-normal">8 - 10 AM</p>
             </div>
           </div>
         </div>
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 03a09ee2ab..4e7a57a6ad 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -100,7 +100,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-default text-sm">
               {t("add_another_calendar")}
             </Link>
           </div>
@@ -119,7 +119,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               )}
             />
           </div>
-          <p className="text-sm text-gray-600">{t("select_which_cal")}</p>
+          <p className="text-default text-sm">{t("select_which_cal")}</p>
         </div>
       )}
       <div className="w-full">
@@ -135,28 +135,28 @@ 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"
             />
           }
         />
       </div>
-      <hr />
+      <hr className="border-subtle" />
       <FormBuilder
         title={t("booking_questions_title")}
         description={t("booking_questions_description")}
         addFieldLabel={t("add_a_booking_question")}
         formProp="bookingFields"
       />
-      <hr />
+      <hr className="border-subtle" />
       <RequiresConfirmationController
         seatsEnabled={seatsEnabled}
         metadata={eventType.metadata}
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="hideCalendarNotes"
         control={formMethods.control}
@@ -170,7 +170,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="successRedirectUrl"
         control={formMethods.control}
@@ -208,7 +208,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           </>
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <SettingsToggle
         data-testid="hashedLinkCheck"
         title={t("private_link")}
@@ -241,7 +241,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>
@@ -250,7 +250,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         </div>
       </SettingsToggle>
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="seatsPerTimeSlotEnabled"
         control={formMethods.control}
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 76436e9b97..a7a11e1276 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -254,7 +254,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </div>
         </div>
       </div>
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="bookingLimits"
         control={formMethods.control}
@@ -276,7 +276,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </SettingsToggle>
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="durationLimits"
         control={formMethods.control}
@@ -303,7 +303,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </SettingsToggle>
         )}
       />
-      <hr />
+      <hr className="border-subtle" />
       <Controller
         name="periodType"
         control={formMethods.control}
@@ -322,14 +322,14 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 return (
                   <div
                     className={classNames(
-                      "mb-2 flex flex-wrap items-center text-sm",
+                      "text-default mb-2 flex flex-wrap items-center text-sm",
                       watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
                     )}
                     key={period.type}>
                     <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}
@@ -337,14 +337,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 bg-default text-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>
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 42cfa49088..6cac42e4db 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -230,7 +230,7 @@ export const EventSetupTab = (
               return (
                 <li
                   key={`${location.type}${index}`}
-                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2 hover:cursor-pointer">
+                  className="border-default text-default mb-2 rounded-md border py-1.5 px-2 hover:cursor-pointer">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
@@ -252,11 +252,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>
@@ -267,7 +267,7 @@ export const EventSetupTab = (
               (location) =>
                 location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
             ) && (
-              <div className="flex text-sm text-gray-600">
+              <div className="text-default flex text-sm">
                 <FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
                   <p>
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 8518313bfb..9c2146a02e 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
@@ -263,7 +263,7 @@ function EventTypeSingleLayout({
               <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent style={{ minWidth: "200px" }}>
-              <DropdownMenuItem className="focus:ring-gray-100">
+              <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   target="_blank"
                   type="button"
@@ -273,7 +273,7 @@ function EventTypeSingleLayout({
                   {t("preview")}
                 </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuItem className="focus:ring-gray-100">
+              <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   type="button"
                   StartIcon={FiLink}
@@ -284,7 +284,7 @@ function EventTypeSingleLayout({
                   {t("copy_link")}
                 </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuItem className="focus:ring-gray-100">
+              <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   type="button"
                   color="destructive"
@@ -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 border-subtle  mt-4 rounded-md 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..672735e311 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 bg-default text-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 bg-default text-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..02f7773bf3 100644
--- a/apps/web/components/eventtype/RequiresConfirmationController.tsx
+++ b/apps/web/components/eventtype/RequiresConfirmationController.tsx
@@ -9,7 +9,7 @@ import type z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Input, Label, SettingsToggle } from "@calcom/ui";
+import { Input, Label, SettingsToggle, RadioField } from "@calcom/ui";
 
 type RequiresConfirmationControllerProps = {
   metadata: z.infer<typeof EventTypeMetaDataSchema>;
@@ -77,72 +77,69 @@ export default function RequiresConfirmationController({
                     );
                   }
                 }}>
-                <div className="-ml-2 flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
-                  <div className="flex items-center">
-                    <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">
-                      <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">
-                      {t("always_requires_confirmation")}
-                    </Label>
-                  </div>
+                <div className="flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
+                  <RadioField label={t("always_requires_confirmation")} id="always" value="always" />
+                  <RadioField
+                    label={
+                      <>
+                        <Trans
+                          i18nKey="when_booked_with_less_than_notice"
+                          defaults="When booked with less than <time></time> notice"
+                          components={{
+                            time: (
+                              <div className="mx-2 flex">
+                                <Input
+                                  type="number"
+                                  min={1}
+                                  onChange={(evt) => {
+                                    const val = Number(evt.target?.value);
+                                    setRequiresConfirmationSetup({
+                                      unit:
+                                        requiresConfirmationSetup?.unit ??
+                                        defaultRequiresConfirmationSetup.unit,
+                                      time: val,
+                                    });
+                                    formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
+                                  }}
+                                  className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
+                                  defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
+                                />
+                                <select
+                                  onChange={(evt) => {
+                                    const val = evt.target.value as UnitTypeLongPlural;
+                                    setRequiresConfirmationSetup({
+                                      time:
+                                        requiresConfirmationSetup?.time ??
+                                        defaultRequiresConfirmationSetup.time,
+                                      unit: val,
+                                    });
+                                    formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
+                                  }}
+                                  className="border-default text-default bg-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
+                                  }>
+                                  <option value="minutes">{t("minute_timeUnit")}</option>
+                                  <option value="hours">{t("hour_timeUnit")}</option>
+                                </select>
+                              </div>
+                            ),
+                          }}
+                        />
+                      </>
+                    }
+                    id="notice"
+                    value="notice"
+                  />
                   <div className="flex items-center">
                     <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">
-                      <Trans
-                        i18nKey="when_booked_with_less_than_notice"
-                        defaults="When booked with less than <time></time> notice"
-                        components={{
-                          time: (
-                            <div className="mx-2 flex">
-                              <Input
-                                type="number"
-                                min={1}
-                                onChange={(evt) => {
-                                  const val = Number(evt.target?.value);
-                                  setRequiresConfirmationSetup({
-                                    unit:
-                                      requiresConfirmationSetup?.unit ??
-                                      defaultRequiresConfirmationSetup.unit,
-                                    time: val,
-                                  });
-                                  formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
-                                }}
-                                className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
-                                defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
-                              />
-                              <select
-                                onChange={(evt) => {
-                                  const val = evt.target.value as UnitTypeLongPlural;
-                                  setRequiresConfirmationSetup({
-                                    time:
-                                      requiresConfirmationSetup?.time ??
-                                      defaultRequiresConfirmationSetup.time,
-                                    unit: val,
-                                  });
-                                  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"
-                                defaultValue={
-                                  metadata?.requiresConfirmationThreshold?.unit ||
-                                  defaultRequiresConfirmationSetup.unit
-                                }>
-                                <option value="minutes">{t("minute_timeUnit")}</option>
-                                <option value="hours">{t("hour_timeUnit")}</option>
-                              </select>
-                            </div>
-                          ),
-                        }}
-                      />
-                    </Label>
+                    <Label htmlFor="notice" className="!m-0 flex items-center" />
                   </div>
                 </div>
               </RadioGroup.Root>
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 769ef377a2..8271801d49 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="border-subtle bg-default divide-subtle divide-y rounded-md border sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
@@ -32,11 +32,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiClock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiUser className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>
diff --git a/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx b/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
index 2fbb4d2cd4..b2e6d905e1 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>
@@ -44,11 +44,11 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
         {/* <Button
           color="minimal"
           type="button"
-          className="ml-auto flex rounded-md border border-gray-200 py-[10x] px-4 font-sans text-sm">
+          className="ml-auto flex rounded-md border border-subtle py-[10x] px-4 font-sans text-sm">
           {t("edit")}
         </Button> */}
       </div>
-      <div className="h-[1px] w-full border-b border-gray-200" />
+      <div className="border-subtle h-[1px] w-full border-b" />
       <div>
         <ul className="p-4">
           {calendars?.map((calendar, i) => (
diff --git a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
index 1e1cdba104..ee91119370 100644
--- a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
+++ b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx
@@ -16,7 +16,7 @@ const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps)
     <>
       <div className="mt-6 flex flex-row">
         <div className="w-full">
-          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-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..fdea184687 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 border-subtle rounded-md border 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 divide-subtle border-subtle mx-1 divide-y rounded-md border 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-subtle border-subtle divide-y rounded-md border 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..40c119c657 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 focus:ring-empthasis mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none"
           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 text-default mt-2 font-sans text-sm font-normal">
           {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 53d50d14a4..7832f15cd9 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -73,7 +73,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
@@ -85,7 +85,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">
@@ -95,7 +95,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>
 
@@ -106,7 +106,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 bdae03d6af..3683066310 100644
--- a/apps/web/components/security/ChangePasswordSection.tsx
+++ b/apps/web/components/security/ChangePasswordSection.tsx
@@ -59,14 +59,14 @@ const ChangePasswordSection = () => {
 
   return (
     <>
-      <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
+      <form className="divide-subtle divide-y 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 c4543fe239..49b3c97246 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 1a4affc72f..65129abef5 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/CalendarSwitch.tsx b/apps/web/components/settings/CalendarSwitch.tsx
index 996809a0da..61025a3f57 100644
--- a/apps/web/components/settings/CalendarSwitch.tsx
+++ b/apps/web/components/settings/CalendarSwitch.tsx
@@ -76,7 +76,7 @@ export function CalendarSwitch(props: {
       {props.defaultSelected && (
         <Badge variant="gray">
           <div className="flex">
-            <FiArrowLeft className="mr-1" /> {t("adding_events_to")}
+            <FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
           </div>
         </Badge>
       )}
diff --git a/apps/web/components/settings/DisableTwoFactorModal.tsx b/apps/web/components/settings/DisableTwoFactorModal.tsx
index 8b8271d017..0760eba320 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 d8ba344191..fcf3748b9a 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..718c5c02e5 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"
@@ -97,8 +97,8 @@ const EnterpriseLicense = (
             {t("purchase_license")}
           </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>
+            <hr className="border-subtle my-8 w-full border-[1.5px]" />
+            <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..2a5a433092 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 dark:text-default inline-block h-10 w-10" />
         </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 76ce292fe2..7f18dfc8b2 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { md } from "@calcom/lib/markdownIt";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { Avatar } from "@calcom/ui";
 
@@ -18,20 +19,20 @@ 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"
-                  dangerouslySetInnerHTML={{ __html: member.safeBio || "" }}
+                  className=" 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..12d356a851 100644
--- a/apps/web/components/ui/AuthContainer.tsx
+++ b/apps/web/components/ui/AuthContainer.tsx
@@ -24,18 +24,18 @@ 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 border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
           {props.children}
         </div>
-        <div className="mt-8 text-center text-sm text-gray-600">{props.footerText}</div>
+        <div className="text-default mt-8 text-center text-sm">{props.footerText}</div>
       </div>
     </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..91436493c5 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",
+              "bg-default inline-block w-full transform 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..66c4d37b8d 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -14,7 +14,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Input, Label } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui";
 import { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
@@ -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) => {
@@ -250,29 +250,30 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}
 
       <Dialog open={openDialogSaveUsername}>
-        <DialogContent>
-          <div className="flex flex-row">
-            <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <FiEdit2 className="m-auto h-6 w-6" />
-            </div>
-            <div className="mb-4 w-full px-4 pt-1">
-              <DialogHeader title={t("confirm_username_change_dialog_title")} />
+        <DialogContent
+          Icon={FiEdit2}
+          title={t("confirm_username_change_dialog_title")}
+          description={
+            <>
               {usernameChangeCondition && usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE && (
-                <p className="mb-4 text-sm text-gray-800">{t("change_username_standard_to_premium")}</p>
+                <p className="text-default mb-4 text-sm">{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="flex flex-row">
+            <div className="mb-4 w-full px-4 pt-1">
+              <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="mt-1" data-testid="current-username">
+                  <p className="text-subtle">{t("current_username")}</p>
+                  <p className="text-emphasis 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>
+                  <p className="text-emphasis">{inputUsernameValue}</p>
                 </div>
               </div>
             </div>
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index f672b94c70..f82afa0906 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, DialogHeader, TextField } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, TextField } from "@calcom/ui";
 import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
 
 interface ICustomUsernameProps {
@@ -154,31 +154,25 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
         </div>
       )}
       <Dialog open={openDialogSaveUsername}>
-        <DialogContent>
-          <div style={{ display: "flex", flexDirection: "row" }}>
-            <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <FiEdit2 className="m-auto h-6 w-6" />
-            </div>
-            <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">
+        <DialogContent type="confirmation" Icon={FiEdit2} title={t("confirm_username_change_dialog_title")}>
+          <div className="flex flex-row">
+            <div className="mb-4 w-full pt-1">
+              <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="mt-1" data-testid="current-username">
+                  <p className="text-subtle">{t("current_username")}</p>
+                  <p className="text-emphasis mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
-                <div className="flex-1">
-                  <p className="text-gray-500" data-testid="new-username">
+                <div className="ml-6 flex-1">
+                  <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
-                  <p>{inputUsernameValue}</p>
+                  <p className="text-emphasis">{inputUsernameValue}</p>
                 </div>
               </div>
             </div>
           </div>
-
           <div className="mt-4 flex flex-row-reverse gap-x-2">
             <Button
               type="button"
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 5ba19fb332..4096ceec78 100644
--- a/apps/web/components/ui/form/LocationSelect.tsx
+++ b/apps/web/components/ui/form/LocationSelect.tsx
@@ -19,7 +19,10 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
-      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
+      {/* TODO: figure out a way to invert icons when in dark mode. We can't just
+        dark:invert due to google meet cal etc all breaking when we do this
+      */}
+      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:hidden" />}
       <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );
@@ -48,7 +51,7 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
           <span>{e.label}</span>
         </div>
       )}
-      formatGroupLabel={(e) => <p className="text-xs font-medium text-gray-600">{e.label}</p>}
+      formatGroupLabel={(e) => <p className="text-default text-xs font-medium">{e.label}</p>}
       {...props}
     />
   );
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/lib/app-providers.tsx b/apps/web/lib/app-providers.tsx
index e576094e68..794b8378df 100644
--- a/apps/web/lib/app-providers.tsx
+++ b/apps/web/lib/app-providers.tsx
@@ -6,7 +6,8 @@ import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
 import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
 import type { NextRouter } from "next/router";
-import type { ComponentProps, ReactNode } from "react";
+import { useRouter } from "next/router";
+import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
 
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
@@ -60,6 +61,44 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
   return <I18nextAdapter {...passedProps} />;
 };
 
+const CalcomThemeProvider = (
+  props: PropsWithChildren<
+    WithNonceProps & { isThemeSupported?: boolean | ((arg: { router: NextRouter }) => boolean) }
+  >
+) => {
+  // We now support the inverse of how we handled it in the past. Setting this to false will disable theme.
+  // undefined or true means we use system theme
+  const router = useRouter();
+  const isThemeSupported = (() => {
+    if (typeof props.isThemeSupported === "function") {
+      return props.isThemeSupported({ router: router });
+    }
+    if (typeof props.isThemeSupported === "undefined") {
+      return true;
+    }
+    return props.isThemeSupported;
+  })();
+
+  const forcedTheme = !isThemeSupported ? "light" : undefined;
+  // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
+  // One such example is our Embeds Demo and Testing page at http://localhost:3100
+  // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
+  const embedNamespace = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
+  const storageKey = typeof embedNamespace === "string" ? `embed-theme-${embedNamespace}` : "theme";
+
+  return (
+    <ThemeProvider
+      nonce={props.nonce}
+      enableColorScheme={false}
+      enableSystem={isThemeSupported}
+      forcedTheme={forcedTheme}
+      storageKey={storageKey}
+      attribute="class">
+      {props.children}
+    </ThemeProvider>
+  );
+};
+
 function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
   const flags = useFlags();
   return <FeatureProvider value={flags}>{children}</FeatureProvider>;
@@ -69,16 +108,6 @@ const AppProviders = (props: AppPropsWithChildren) => {
   const session = trpc.viewer.public.session.useQuery().data;
   // No need to have intercom on public pages - Good for Page Performance
   const isPublicPage = usePublicPage();
-  const isThemeSupported =
-    typeof props.Component.isThemeSupported === "function"
-      ? props.Component.isThemeSupported({ router: props.router })
-      : props.Component.isThemeSupported;
-  const forcedTheme = isThemeSupported ? undefined : "light";
-  // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
-  // One such example is our Embeds Demo and Testing page at http://localhost:3100
-  // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
-  const embedNamespace = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
-  const storageKey = typeof embedNamespace === "string" ? `embed-theme-${embedNamespace}` : "theme";
 
   const RemainingProviders = (
     <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
@@ -86,16 +115,13 @@ const AppProviders = (props: AppPropsWithChildren) => {
         <CustomI18nextProvider {...props}>
           <TooltipProvider>
             {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
-            <ThemeProvider
+            <CalcomThemeProvider
               nonce={props.pageProps.nonce}
-              enableColorScheme={false}
-              storageKey={storageKey}
-              forcedTheme={forcedTheme}
-              attribute="class">
+              isThemeSupported={props.Component.isThemeSupported}>
               <FeatureFlagsProvider>
                 <MetaProvider>{props.children}</MetaProvider>
               </FeatureFlagsProvider>
-            </ThemeProvider>
+            </CalcomThemeProvider>
           </TooltipProvider>
         </CustomI18nextProvider>
       </SessionProvider>
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 1d8fdcea91..09c425b8ce 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -88,21 +88,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: "Cal.com" })}</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">
@@ -116,44 +116,44 @@ export default function Custom404() {
                         </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">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                             <span className="focus:outline-none">
                               <span className="absolute inset-0" aria-hidden="true" />
                               {t("acquire_commercial_license")}
                             </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>
                 </ul>
 
-                <ul role="list" className="divide-y divide-gray-200 border-gray-200">
+                <ul role="list" className="border-subtle divide-subtle divide-y">
                   <li className="px-4 py-2">
                     <Link
                       href="https://cal.com/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">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 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>
@@ -162,7 +162,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"
@@ -189,24 +189,24 @@ export default function Custom404() {
                         </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">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 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>
                 </ul>
                 <div className="mt-8">
                   <Link
-                    href="https://cal.com/sales"
-                    className="text-base font-medium text-black hover:text-gray-500">
+                    href={`${WEBSITE_URL}/enterprise`}
+                    className="hover:text-subtle text-emphasis text-base font-medium">
                     {t("contact_sales")}
                     <span aria-hidden="true"> &rarr;</span>
                   </Link>
@@ -216,8 +216,10 @@ export default function Custom404() {
           ) : (
             <>
               <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">
+                <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 ? (
@@ -242,7 +244,7 @@ export default function Custom404() {
                 )}
               </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("popular_pages")}
                 </h2>
                 {!isSubpage && isCalcom && (
@@ -259,46 +261,46 @@ export default function Custom404() {
                           </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">
+                          <h3 className="text-emphasis text-base font-medium">
+                            <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 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-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
+                          <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</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">
+                <ul role="list" className="border-subtle divide-subtle mt-4 divide-y">
                   {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 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-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
+                          <h3 className="text-emphasis text-base font-medium">
+                            <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 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>
+                          <p className="text-subtle text-base">{link.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>
@@ -308,7 +310,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"
@@ -335,22 +337,22 @@ export default function Custom404() {
                         </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">
+                        <h3 className="text-emphasis text-base font-medium">
+                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 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>
                 </ul>
                 <div className="mt-8">
-                  <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
+                  <Link href="/" className="hover:text-subtle text-emphasis text-base font-medium">
                     {t("or_go_back_home")}
                     <span aria-hidden="true"> &rarr;</span>
                   </Link>
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index 208810b8ab..e93459e4d0 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -11,24 +11,24 @@ 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>
-        <p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
+      <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="text-default mt-4 mb-6 max-w-2xl text-sm">
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
         </p>
         {router.query.error && (
           <div className="mb-8 flex flex-col">
-            <p className="mb-4 max-w-2xl text-sm text-gray-600">
+            <p className="text-default mb-4 max-w-2xl text-sm">
               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 c24af1651c..d3c765cd28 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -14,7 +14,6 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import defaultEvents, {
   getDynamicEventDescription,
@@ -48,9 +47,9 @@ 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="overflow-hidden rounded-sm border ">
+        <div className="text-muted p-8 text-center">
+          <h2 className="font-cal text-default  mb-2 text-3xl">{" " + t("unavailable")}</h2>
           <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
         </div>
       </div>
@@ -60,14 +59,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=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+          <FiArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
           <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=" text-emphasis text-sm font-semibold">{type.title}</p>
               <EventTypeDescription className="text-sm" eventType={type} />
             </div>
             <div className="mt-1 self-center">
@@ -118,53 +117,39 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
             : [{ username: `${user.username}`, name: `${user.name}` }],
         }}
       />
-      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
 
-      <div
-        className={classNames(
-          shouldAlignCentrally ? "mx-auto" : "",
-          isEmbed ? "max-w-3xl" : "",
-          "dark:bg-darkgray-50"
-        )}>
+      <div className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "max-w-3xl" : "")}>
         <main
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed
-              ? " border-bookinglightest  dark:bg-darkgray-50 rounded-md border bg-white sm:dark:border-gray-600"
-              : "",
+            isEmbed ? " border-bookinglightest  bg-default rounded-md border" : "",
             "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 text-emphasis mb-1 text-3xl">
                 {nameOrUsername}
-                {user.verified && (
-                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
-                )}
+                {user.verified && <BadgeCheckIcon className=" mx-1 -mt-1 inline h-6 w-6 text-blue-500" />}
               </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="  text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     dangerouslySetInnerHTML={{ __html: props.safeBio }}
                   />
                 </>
               )}
             </div>
           )}
+
           <div
-            className={classNames(
-              "rounded-md ",
-              !isEventListEmpty && "dark:border-darkgray-300 border border-gray-200"
-            )}
+            className={classNames("rounded-md ", !isEventListEmpty && "border-subtle border")}
             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">
-                    😴{" " + t("user_away")}
-                  </h2>
+              <div className="overflow-hidden rounded-sm border ">
+                <div className="text-muted  p-8 text-center">
+                  <h2 className="font-cal text-default mb-2 text-3xl">😴{" " + t("user_away")}</h2>
                   <p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
                 </div>
               </div>
@@ -175,8 +160,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=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+                  <FiArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
                   {/* 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,9 +178,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">
-                          {type.title}
-                        </h2>
+                        <h2 className=" text-default pr-2 text-sm font-semibold">{type.title}</h2>
                       </div>
                       <EventTypeDescription eventType={type} />
                     </Link>
@@ -204,6 +187,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               ))
             )}
           </div>
+
           {isEventListEmpty && <EmptyPage name={user.name ?? "User"} />}
         </main>
         <Toaster position="bottom-right" />
@@ -211,7 +195,6 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
     </>
   );
 }
-User.isThemeSupported = true;
 
 const getEventTypesWithHiddenFromDB = async (userId: number) => {
   return (
diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index 4e5c27aed2..664d7b0166 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 text-emphasis600 mb-2 text-3xl">
                 😴{" " + 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 text-emphasis600 mb-2 text-3xl">
                 {" " + t("unavailable")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
@@ -54,8 +54,6 @@ export default function Type(props: AvailabilityPageProps) {
   );
 }
 
-Type.isThemeSupported = true;
-
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 async function getUserPageProps(context: GetStaticPropsContext) {
   // load server side dependencies
diff --git a/apps/web/pages/[user]/book.tsx b/apps/web/pages/[user]/book.tsx
index 968cb66986..244f4bc42d 100644
--- a/apps/web/pages/[user]/book.tsx
+++ b/apps/web/pages/[user]/book.tsx
@@ -35,12 +35,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 text-default mb-2 text-3xl">
                 😴{" " + t("user_away")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_away_description")}</p>
@@ -50,12 +50,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 text-default mb-2 text-3xl">
                 {" " + t("unavailable")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
@@ -69,8 +69,6 @@ export default function Book(props: BookPageProps) {
   );
 }
 
-Book.isThemeSupported = true;
-
 const querySchema = z.object({
   bookingUid: z.string().optional(),
   count: z.coerce.number().optional(),
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 2d92e21ddb..715ec084a0 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -41,12 +41,12 @@ class MyDocument extends Document<Props> {
           <link rel="manifest" href="/site.webmanifest" />
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
           <meta name="msapplication-TileColor" content="#ff0000" />
-          <meta name="theme-color" content="#ffffff" />
+          <meta name="theme-color" content="var(--cal-bg)" />
           <Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
         </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..5378d3e7df 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="bg-emphasis absolute z-50 flex h-screen w-full items-center" />;
   }
 
   if (status === "unauthenticated") {
diff --git a/apps/web/pages/apps/categories/[category].tsx b/apps/web/pages/apps/categories/[category].tsx
index 3829db7470..c66f891418 100644
--- a/apps/web/pages/apps/categories/[category].tsx
+++ b/apps/web/pages/apps/categories/[category].tsx
@@ -24,11 +24,11 @@ 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 && (
-              <span className="gap-1 text-gray-600">
+              <span className="text-default gap-1">
                 <span>&nbsp;/&nbsp;</span>
                 {t("category_apps", { category: category[0].toUpperCase() + category?.slice(1) })}
               </span>
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 303c69643a..e8936f1e58 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/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index 9fe4638656..f236b08664 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -259,7 +259,7 @@ const IntegrationsContainer = ({
           );
         }
         return (
-          <div className="rounded-md border border-gray-200 p-7">
+          <div className="border-subtle rounded-md border p-7">
             <ShellSubHeading
               title={t(variant || "other")}
               subtitle={t(`installed_app_${variant || "other"}_description`)}
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 2a66e3589c..02c13fe81a 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 93d775f5cd..77e459cb88 100644
--- a/apps/web/pages/auth/forgot-password/index.tsx
+++ b/apps/web/pages/auth/forgot-password/index.tsx
@@ -95,7 +95,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/login.tsx b/apps/web/pages/auth/login.tsx
index 69f7a93b92..143e16a2dd 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -4,6 +4,7 @@ import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken, signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import type { CSSProperties } from "react";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
@@ -124,7 +125,14 @@ export default function Login({
   };
 
   return (
-    <>
+    <div
+      style={
+        {
+          "--cal-brand": "#111827",
+          "--cal-brand-emphasis": "#101010",
+          "--cal-brand-text": "white",
+        } as CSSProperties
+      }>
       <AuthContainer
         title={t("login")}
         description={t("login")}
@@ -159,7 +167,7 @@ export default function Login({
                     <Link
                       href="/auth/forgot-password"
                       tabIndex={-1}
-                      className="text-sm font-medium text-gray-600">
+                      className="text-default text-sm font-medium">
                       {t("forgot")}
                     </Link>
                   </div>
@@ -187,7 +195,7 @@ export default function Login({
           </form>
           {!twoFactorRequired && (
             <>
-              {(isGoogleLoginEnabled || isSAMLLoginEnabled) && <hr className="my-8" />}
+              {(isGoogleLoginEnabled || isSAMLLoginEnabled) && <hr className="border-subtle my-8" />}
               <div className="space-y-3">
                 {isGoogleLoginEnabled && (
                   <Button
@@ -215,7 +223,7 @@ export default function Login({
         </FormProvider>
       </AuthContainer>
       <AddToHomescreen />
-    </>
+    </div>
   );
 }
 
@@ -292,4 +300,6 @@ const _getServerSideProps = async function getServerSideProps(context: GetServer
   };
 };
 
+Login.isThemeSupported = false;
+
 export const getServerSideProps = withNonce(_getServerSideProps);
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index be7d25ed1a..e5bc05af14 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -16,7 +16,7 @@ import { ssrInit } from "@server/lib/ssr";
 
 type Props = inferSSRProps<typeof getServerSideProps>;
 
-export default function Logout(props: Props) {
+export function Logout(props: Props) {
   const { status } = useSession();
   if (status === "authenticated") signOut({ redirect: false });
   const router = useRouter();
@@ -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>
@@ -50,6 +50,10 @@ export default function Logout(props: Props) {
   );
 }
 
+Logout.isThemeSupported = false;
+
+export default Logout;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   // Deleting old cookie manually, remove this code after all existing cookies have expired
diff --git a/apps/web/pages/auth/setup/index.tsx b/apps/web/pages/auth/setup/index.tsx
index 9c8d5dd4c8..df31a2b7d0 100644
--- a/apps/web/pages/auth/setup/index.tsx
+++ b/apps/web/pages/auth/setup/index.tsx
@@ -17,7 +17,7 @@ import EnterpriseLicense from "@components/setup/EnterpriseLicense";
 
 import { ssrInit } from "@server/lib/ssr";
 
-export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
+export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
   const router = useRouter();
   const [value, setValue] = useState(props.isFreeLicense ? "FREE" : "EE");
@@ -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="bg-subtle flex items-center print:h-full md:h-screen">
         <WizardForm
           href="/auth/setup"
           steps={steps}
@@ -135,6 +135,10 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
   );
 }
 
+Setup.isThemeSupported = false;
+
+export default Setup;
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { req, res } = context;
 
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 6f74e31b91..5a2dfcab31 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))}
@@ -181,7 +181,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"
@@ -225,7 +225,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>
@@ -245,7 +245,7 @@ export default function Availability() {
           }}
           className="flex flex-col sm:mx-0 xl:flex-row xl:space-x-6">
           <div className="flex-1 flex-row xl:mr-0">
-            <div className="mb-6 rounded-md border">
+            <div className="border-subtle mb-6 rounded-md border">
               <div>
                 {typeof me.data?.weekStart === "string" && (
                   <Schedule
@@ -260,14 +260,14 @@ export default function Availability() {
                 )}
               </div>
             </div>
-            <div className="my-6 rounded-md border">
+            <div className="border-subtle my-6 rounded-md border">
               {schedule?.workingHours && <DateOverride workingHours={schedule.workingHours} />}
             </div>
           </div>
           <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
@@ -276,7 +276,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)}
                       />
                     ) : (
@@ -285,9 +285,9 @@ export default function Availability() {
                   }
                 />
               </div>
-              <hr className="my-6 mr-8" />
+              <hr className="border-subtle 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 742f3b3a9c..7e4a81b870 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -82,8 +82,8 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
           />
         </div>
       ) : (
-        <div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
-          <ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}>
+        <div className="border-subtle bg-default mb-16 overflow-hidden rounded-md border">
+          <ul className="divide-subtle divide-y" data-testid="schedules" ref={animationParentRef}>
             {schedules.map((schedule) => (
               <ScheduleListItem
                 displayOptions={{
diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index 5290c7edac..d7b9373722 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,15 +79,15 @@ 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")}>
+                      <span className="text-default font-medium" title={dayjs(slot.start).format("HH:mm")}>
                         {dayjs(slot.start).format("HH:mm")}
                       </span>{" "}
                       {t("and")}{" "}
-                      <span className="font-medium text-gray-800" title={dayjs(slot.end).format("HH:mm")}>
+                      <span className="text-default font-medium" title={dayjs(slot.end).format("HH:mm")}>
                         {dayjs(slot.end).format("HH:mm")}
                       </span>{" "}
                       {t("on")} {dayjs(slot.start).format("D")}{" "}
@@ -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 e23402516d..f37ec03e64 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -28,7 +28,6 @@ import {
   getBookingFieldsWithSystemFields,
 } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import { APP_NAME } from "@calcom/lib/constants";
 import {
   formatToLocalizedDate,
@@ -37,6 +36,7 @@ import {
 } from "@calcom/lib/date-fns";
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import { getBookingWithResponses } from "@calcom/lib/getBooking";
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
@@ -48,7 +48,7 @@ import prisma from "@calcom/prisma";
 import type { Prisma } from "@calcom/prisma/client";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Button, EmailInput, HeadSeo, Badge } from "@calcom/ui";
+import { Button, EmailInput, HeadSeo, Badge, useCalcomTheme } from "@calcom/ui";
 import { FiX, FiExternalLink, FiChevronLeft, FiCheck, FiCalendar } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
@@ -59,6 +59,20 @@ import EventReservationSchema from "@components/schemas/EventReservationSchema";
 
 import { ssrInit } from "@server/lib/ssr";
 
+const useBrandColors = ({
+  brandColor,
+  darkBrandColor,
+}: {
+  brandColor?: string | null;
+  darkBrandColor?: string | null;
+}) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+};
+
 type SuccessProps = inferSSRProps<typeof getServerSideProps>;
 
 const stringToBoolean = z
@@ -256,6 +270,10 @@ export default function Success(props: SuccessProps) {
   }
 
   useTheme(isSuccessBookingPage ? props.profile.theme : "light");
+  useBrandColors({
+    brandColor: props.profile.brandColor,
+    darkBrandColor: props.profile.darkBrandColor,
+  });
   const title = t(
     `booking_${needsConfirmation ? "submitted" : "confirmed"}${props.recurringBookings ? "_recurring" : ""}`
   );
@@ -287,14 +305,13 @@ 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 hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
             <FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
           </Link>
         </div>
       )}
       <HeadSeo title={title} description={title} />
       <BookingPageTagManager eventType={eventType} />
-      <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
       <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
         <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
           <div
@@ -308,7 +325,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 ? "" : " bg-default dark:bg-muted border-subtle",
                   "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
                 )}
                 role="dialog"
@@ -318,12 +335,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 && !isCancelled && (
                     // eslint-disable-next-line @next/next/no-img-element
@@ -332,12 +349,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 text-2xl font-semibold leading-6"
                     data-testid={isCancelled ? "cancelled-headline" : ""}
                     id="modal-headline">
                     {needsConfirmation && !isCancelled
@@ -353,7 +370,7 @@ export default function Success(props: SuccessProps) {
                       : t("meeting_is_scheduled")}
                   </h3>
                   <div className="mt-3">
-                    <p className="text-gray-600 dark:text-gray-300">{getTitle()}</p>
+                    <p className="text-default">{getTitle()}</p>
                   </div>
                   {props.paymentStatus &&
                     (bookingInfo.status === BookingStatus.CANCELLED ||
@@ -369,7 +386,7 @@ export default function Success(props: SuccessProps) {
                       </h4>
                     )}
 
-                  <div className="border-bookinglightest text-bookingdark dark:border-darkgray-200 mt-8 grid grid-cols-3 border-t pt-8 text-left dark:text-gray-300">
+                  <div className="border-subtle text-default mt-8 grid grid-cols-3 border-t pt-8 text-left">
                     {(isCancelled || reschedule) && cancellationReason && (
                       <>
                         <div className="font-medium">
@@ -417,15 +434,13 @@ export default function Success(props: SuccessProps) {
                                 <span className="mr-2">{bookingInfo.user.name}</span>
                                 <Badge variant="blue">{t("Host")}</Badge>
                               </div>
-                              <p className="text-bookinglight">{bookingInfo.user.email}</p>
+                              <p className="text-default">{bookingInfo.user.email}</p>
                             </div>
                           )}
                           {bookingInfo?.attendees.map((attendee) => (
                             <div key={attendee.name + attendee.email} className="mb-3 last:mb-0">
                               {attendee.name && <p>{attendee.name}</p>}
-                              <p data-testid={`attendee-${attendee.email}`} className="text-bookinglight">
-                                {attendee.email}
-                              </p>
+                              <p data-testid={`attendee-${attendee.email}`}>{attendee.email}</p>
                             </div>
                           ))}
                         </div>
@@ -440,10 +455,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"
                               rel="noreferrer">
                               {providerName || "Link"}
-                              <FiExternalLink className="inline h-4 w-4 text-gray-700 dark:text-white" />
+                              <FiExternalLink className="text-default inline h-4 w-4" />
                             </a>
                           ) : (
                             locationToDisplay
@@ -475,8 +490,11 @@ export default function Success(props: SuccessProps) {
 
                       return (
                         <>
-                          <div className="mt-4 font-medium">{label}</div>
-                          <p className="break-words" data-testid="field-response" data-fob-field={field.name}>
+                          <div className="text-emphasis mt-4 font-medium">{label}</div>
+                          <p
+                            className="text-default break-words"
+                            data-testid="field-response"
+                            data-fob-field={field.name}>
                             {response.toString()}
                           </p>
                         </>
@@ -488,14 +506,12 @@ export default function Success(props: SuccessProps) {
                   !isCancelled &&
                   (!isCancellationMode ? (
                     <>
-                      <hr className="border-bookinglightest dark:border-darkgray-300 mb-8" />
+                      <hr className="border-subtle mb-8" />
                       <div className="text-center last:pb-0">
-                        <span className="text-gray-900 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
-                          {t("need_to_make_a_change")}
-                        </span>
+                        <span className="text-emphasis ltr:mr-2 rtl:ml-2">{t("need_to_make_a_change")}</span>
 
                         {!props.recurringBookings && (
-                          <span className="text-bookinglight inline text-gray-700">
+                          <span className="text-default inline">
                             <span className="underline" data-testid="reschedule-link">
                               <Link
                                 href={`/reschedule/${seatReferenceUid || bookingInfo?.uid}`}
@@ -510,7 +526,7 @@ export default function Success(props: SuccessProps) {
                         <button
                           data-testid="cancel"
                           className={classNames(
-                            "text-bookinglight text-gray-700 underline",
+                            "text-default underline",
                             props.recurringBookings && "ltr:mr-2 rtl:ml-2"
                           )}
                           onClick={() => setIsCancellationMode(true)}>
@@ -520,7 +536,7 @@ export default function Success(props: SuccessProps) {
                     </>
                   ) : (
                     <>
-                      <hr className="border-bookinglightest dark:border-darkgray-200" />
+                      <hr className="border-subtle" />
                       <CancelBooking
                         booking={{ uid: bookingInfo?.uid, title: bookingInfo?.title, id: bookingInfo?.id }}
                         profile={{ name: props.profile.name, slug: props.profile.slug }}
@@ -539,9 +555,9 @@ export default function Success(props: SuccessProps) {
                   !isCancelled &&
                   !!calculatedDuration && (
                     <>
-                      <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">
+                      <hr className="border-subtle mt-8" />
+                      <div className="text-default align-center flex flex-row justify-center pt-8">
+                        <span className="text-default flex self-center font-medium ltr:mr-2 rtl:ml-2 ">
                           {t("add_to_calendar")}
                         </span>
                         <div className="justify-left mt-1 flex text-left sm:mt-0">
@@ -563,7 +579,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="text-default border-subtle h-10 w-10 rounded-sm border px-3 py-2 ltr:mr-2 rtl:ml-2">
                             <svg
                               className="-mt-1.5 inline-block h-4 w-4"
                               fill="currentColor"
@@ -589,7 +605,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="border-subtle text-default mx-2 h-10 w-10 rounded-sm border px-3 py-2"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -616,7 +632,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="text-default border-subtle mx-2 h-10 w-10 rounded-sm border px-3 py-2"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -629,7 +645,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="border-subtle text-default mx-2 h-10 w-10 rounded-sm border px-3 py-2"
                             download={props.eventType.title + ".ics"}>
                             <svg
                               version="1.1"
@@ -648,8 +664,8 @@ 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">
+                    <hr className="border-subtle mt-8" />
+                    <div className="text-default pt-8 text-center text-xs">
                       <a href="https://cal.com/signup">
                         {t("create_booking_link_with_calcom", { appName: APP_NAME })}
                       </a>
@@ -667,7 +683,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-default text-default mt-0 block w-full rounded-none rounded-l-md shadow-sm focus:ring-black  sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
                         <Button
@@ -690,8 +706,6 @@ export default function Success(props: SuccessProps) {
   );
 }
 
-Success.isThemeSupported = true;
-
 type RecurringBookingsProps = {
   eventType: SuccessProps["eventType"];
   recurringBookings: SuccessProps["recurringBookings"];
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index d3b036b147..3d082d227d 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>
-                <div className="overflow-hidden rounded-md border border-gray-200">
+                <p className="text-subtle mb-2 text-xs font-medium uppercase leading-4">{t("today")}</p>
+                <div className="border-subtle overflow-hidden rounded-md border">
                   <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-subtle divide-y" data-testid="today-bookings">
                       <Fragment>
                         {bookingsToday.map((booking: BookingOutput) => (
                           <BookingListItem
@@ -142,9 +142,9 @@ export default function Bookings() {
               </div>
             )}
             <div className="pt-2 xl:pt-0">
-              <div className="overflow-hidden rounded-md border border-gray-200">
+              <div className="border-subtle overflow-hidden rounded-md border">
                 <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-subtle divide-y" data-testid="bookings">
                     {query.data.pages.map((page, index) => (
                       <Fragment key={index}>
                         {page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
@@ -165,7 +165,7 @@ export default function Bookings() {
                   </tbody>
                 </table>
               </div>
-              <div className="p-4 text-center" ref={buttonInView.ref}>
+              <div className="text-default p-4 text-center" ref={buttonInView.ref}>
                 <Button
                   color="minimal"
                   loading={query.isFetchingNextPage}
diff --git a/apps/web/pages/d/[link]/[slug].tsx b/apps/web/pages/d/[link]/[slug].tsx
index 440a00e7d2..2e1bdafb46 100644
--- a/apps/web/pages/d/[link]/[slug].tsx
+++ b/apps/web/pages/d/[link]/[slug].tsx
@@ -23,7 +23,6 @@ export type DynamicAvailabilityPageProps = inferSSRProps<typeof getServerSidePro
 export default function Type(props: DynamicAvailabilityPageProps) {
   return <AvailabilityPage {...props} />;
 }
-Type.isThemeSupported = true;
 
 const querySchema = z.object({
   link: z.string().optional().default(""),
diff --git a/apps/web/pages/d/[link]/book.tsx b/apps/web/pages/d/[link]/book.tsx
index 6e148844f9..a8a3684846 100644
--- a/apps/web/pages/d/[link]/book.tsx
+++ b/apps/web/pages/d/[link]/book.tsx
@@ -19,8 +19,6 @@ export default function Book(props: HashLinkPageProps) {
   return <BookingPage {...props} />;
 }
 
-Book.isThemeSupported = true;
-
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const link = asStringOrThrow(context.query.link as string);
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index aa52db80c7..2dbf082672 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-subtle 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">
-      <ul ref={parent} className="!static w-full divide-y divide-gray-200" data-testid="event-types">
+    <div className="bg-default border-subtle mb-16 flex overflow-hidden rounded-md border">
+      <ul ref={parent} className="divide-subtle !static w-full divide-y" 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 hover:text-emphasis border-default hover:border-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 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 border-default hover:text-emphasis hover:border-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  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>
@@ -353,7 +353,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                       <div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
                         {type.hidden && <Badge variant="gray">{t("hidden")}</Badge>}
                         <Tooltip content={t("show_eventtype_on_profile")}>
-                          <div className="self-center rounded-md p-2 hover:bg-gray-200">
+                          <div className="self-center rounded-md p-2">
                             <Switch
                               name="Hidden"
                               checked={!type.hidden}
@@ -581,11 +581,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" />
@@ -595,7 +595,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 1e69000970..8bad0226f6 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/insights/index.tsx b/apps/web/pages/insights/index.tsx
index 03e2d4d231..25cbdce621 100644
--- a/apps/web/pages/insights/index.tsx
+++ b/apps/web/pages/insights/index.tsx
@@ -22,10 +22,10 @@ const Heading = () => {
 
   return (
     <div className="min-w-52 hidden md:block">
-      <h3 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 truncate text-xl font-semibold tracking-wide text-black xl:max-w-full">
+      <h3 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis truncate text-xl font-semibold tracking-wide xl:max-w-full">
         {t("analytics_for_organisation")}
       </h3>
-      <p className="hidden text-sm text-gray-500 md:block">{t("subtitle_analytics")}</p>
+      <p className="text-default hidden text-sm md:block">{t("subtitle_analytics")}</p>
     </div>
   );
 };
@@ -93,8 +93,8 @@ export default function InsightsPage() {
                   <MostBookedTeamMembersTable />
                   <LeastBookedTeamMembersTable />
                 </div>
-                <small className="block text-center text-gray-600">
-                  {t("looking_for_more_insights")}
+                <small className="text-default block text-center">
+                  {t("looking_for_more_insights")}{" "}
                   <a
                     className="text-blue-500 hover:underline"
                     href="mailto:updates@cal.com?subject=Feature%20Request%3A%20More%20Analytics&body=Hey%20Cal.com%20Team%2C%20I%20love%20the%20analytics%20page%20but%20I%20am%20looking%20for%20...">
diff --git a/apps/web/pages/maintenance.tsx b/apps/web/pages/maintenance.tsx
index e2b7ecc35d..b418920a94 100644
--- a/apps/web/pages/maintenance.tsx
+++ b/apps/web/pages/maintenance.tsx
@@ -8,16 +8,16 @@ 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>
-        <p className="mt-4 mb-6 max-w-2xl text-sm text-gray-600">
+      <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="text-default mt-4 mb-6 max-w-2xl text-sm">
           {t("under_maintenance_description", { appName: APP_NAME })}
         </p>
         <Button href={`${WEBSITE_URL}/support`}>{t("contact_support")}</Button>
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/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index 531bf20d5f..dfb4057495 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -18,14 +18,14 @@ interface CtaRowProps {
 const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
   return (
     <>
-      <section className={classNames("flex flex-col sm:flex-row", className)}>
+      <section className={classNames("text-default flex flex-col sm:flex-row", className)}>
         <div>
           <h2 className="font-medium">{title}</h2>
           <p>{description}</p>
         </div>
         <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">{children}</div>
       </section>
-      <hr className="border-gray-200" />
+      <hr className="border-subtle" />
     </>
   );
 };
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index d32e246186..012ae2c4ea 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -1,12 +1,15 @@
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import ThemeLabel from "@calcom/features/settings/ThemeLabel";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { APP_NAME } from "@calcom/lib/constants";
+import { checkWCAGContrastColor } from "@calcom/lib/getBrandColours";
 import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
+  Alert,
   Button,
   ColorPicker,
   Form,
@@ -23,7 +26,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6 divide-y">
+      <div className="mt-6 mb-8 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
@@ -46,6 +49,7 @@ const AppearanceView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const [darkModeError, setDarkModeError] = useState(false);
 
   const { isLoading: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan();
 
@@ -93,8 +97,8 @@ const AppearanceView = () => {
       <Meta title={t("appearance")} description={t("appearance_description")} />
       <div className="mb-6 flex items-center text-sm">
         <div>
-          <p className="font-semibold">{t("theme")}</p>
-          <p className="text-gray-600">{t("theme_applies_note")}</p>
+          <p className="text-default font-semibold">{t("theme")}</p>
+          <p className="text-default">{t("theme_applies_note")}</p>
         </div>
       </div>
       <div className="flex flex-col justify-between sm:flex-row">
@@ -121,11 +125,11 @@ const AppearanceView = () => {
         />
       </div>
 
-      <hr className="my-8 border border-gray-200" />
+      <hr className="border-subtle my-8 border" />
       <div className="mb-6 flex items-center text-sm">
         <div>
-          <p className="font-semibold">{t("custom_brand_colors")}</p>
-          <p className="mt-0.5 leading-5 text-gray-600">{t("customize_your_brand_colors")}</p>
+          <p className="text-default font-semibold">{t("custom_brand_colors")}</p>
+          <p className="text-default mt-0.5 leading-5">{t("customize_your_brand_colors")}</p>
         </div>
       </div>
 
@@ -136,7 +140,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-default 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,15 +154,30 @@ 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-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.darkBrandColor}
-                onChange={(value) => formMethods.setValue("darkBrandColor", value, { shouldDirty: true })}
+                onChange={(value) => {
+                  if (!checkWCAGContrastColor("#101010", value)) {
+                    setDarkModeError(true);
+                  } else {
+                    setDarkModeError(false);
+                  }
+                  formMethods.setValue("darkBrandColor", value, { shouldDirty: true });
+                }}
               />
             </div>
           )}
         />
       </div>
+      {darkModeError ? (
+        <div className="mt-4">
+          <Alert
+            severity="warning"
+            message="Dark Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible."
+          />
+        </div>
+      ) : null}
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"
@@ -167,7 +186,7 @@ const AppearanceView = () => {
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
       </Button> */}
-      <hr className="my-8 border border-gray-200" />
+      <hr className="border-subtle my-8 border" />
       <Controller
         name="hideBranding"
         control={formMethods.control}
@@ -177,12 +196,12 @@ const AppearanceView = () => {
             <div className="flex w-full text-sm">
               <div className="mr-1 flex-grow">
                 <div className="flex items-center">
-                  <p className="font-semibold ltr:mr-2 rtl:ml-2">
+                  <p className="text-default font-semibold ltr:mr-2 rtl:ml-2">
                     {t("disable_cal_branding", { appName: APP_NAME })}
                   </p>
                   <UpgradeTeamsBadge />
                 </div>
-                <p className="mt-0.5  text-gray-600">{t("removes_cal_branding", { appName: APP_NAME })}</p>
+                <p className="text-default  mt-0.5">{t("removes_cal_branding", { appName: APP_NAME })}</p>
               </div>
               <div className="flex-none">
                 <Switch
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index 357eeaa2f2..db8310990f 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -6,6 +6,7 @@ import { Fragment } from "react";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -84,17 +85,17 @@ 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]">
-                  <FiCalendar className="h-6 w-6" />
+              <div className="bg-muted border-subtle mt-4 flex space-x-4 rounded-md p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
+                <div className=" bg-default border-subtle flex h-9 w-9 items-center justify-center rounded-md border-2 p-[6px]">
+                  <FiCalendar className="text-default 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">
+                    <p className=" text-default text-sm leading-5">
                       <Trans i18nKey="add_to_calendar_description">
                         Where to add events when you re booked. You can override this on a per-event basis in
                         advanced settings in the event type.
@@ -109,10 +110,10 @@ 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>
+              <p className="text-default pb-2 text-sm leading-5">{t("select_calendars")}</p>
               <List className="flex flex-col gap-6" noBorderTreatment>
                 {data.connectedCalendars.map((item) => (
                   <Fragment key={item.credentialId}>
@@ -131,7 +132,7 @@ const CalendarsView = () => {
                               trashIcon
                               onSuccess={() => query.refetch()}
                               buttonProps={{
-                                className: "border border-gray-300 py-[2px]",
+                                className: "border border-default py-[2px]",
                                 color: "secondary",
                               }}
                             />
@@ -146,7 +147,10 @@ const CalendarsView = () => {
                             // eslint-disable-next-line @next/next/no-img-element
                             item.integration.logo && (
                               <img
-                                className="h-10 w-10"
+                                className={classNames(
+                                  "h-10 w-10",
+                                  item.integration.logo.includes("-dark") && "dark:invert"
+                                )}
                                 src={item.integration.logo}
                                 alt={item.integration.title}
                               />
@@ -167,12 +171,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>
+                        <div className="border-subtle w-full border-t">
+                          <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..bc9dd2c836 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -32,7 +32,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6 divide-y">
+      <div className="divide-subtle mt-6 mb-8 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
@@ -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="bg-default w-full 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..3f0b1d61f3 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -26,7 +26,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6 divide-y">
+      <div className="mt-6 mb-8 space-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -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/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index cc850c72c9..3293213a6c 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -47,7 +47,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6 divide-y">
+      <div className="mt-6 mb-8 space-y-6">
         <div className="flex items-center">
           <SkeletonAvatar className="h-12 w-12 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
@@ -226,7 +226,7 @@ const ProfileView = () => {
         }
       />
 
-      <hr className="my-6 border-gray-200" />
+      <hr className="border-subtle my-6" />
 
       <Label>{t("danger_zone")}</Label>
       {/* Delete account Dialog */}
@@ -242,7 +242,9 @@ const ProfileView = () => {
           type="creation"
           Icon={FiAlertTriangle}>
           <>
-            <p className="mb-7">{t("delete_account_confirmation_message", { appName: APP_NAME })}</p>
+            <p className="text-default mb-7">
+              {t("delete_account_confirmation_message", { appName: APP_NAME })}
+            </p>
             {isCALIdentityProviver && (
               <PasswordField
                 data-testid="password"
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index f8c7f84ce7..654b6732c5 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -68,10 +68,10 @@ 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">
+            <Skeleton as="p" className="text-default -mt-2 text-sm leading-normal">
               {t("user_impersonation_description")}
             </Skeleton>
           </div>
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index 0b8b13634e..599053e576 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -114,13 +114,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],
             })}
@@ -154,10 +154,10 @@ const PasswordView = () => {
               />
             </div>
           </div>
-          <p className="mt-4 max-w-[38rem] text-sm text-gray-600">
+          <p className="text-default mt-4 max-w-[38rem] text-sm">
             {t("invalid_password_hint", { passwordLength: passwordMinLength })}
           </p>
-          <div className="mt-8 border-t border-gray-200 py-8">
+          <div className="border-subtle mt-8 border-t py-8">
             <SettingsToggle
               title={t("session_timeout")}
               description={t("session_timeout_description")}
@@ -174,7 +174,7 @@ const PasswordView = () => {
             {sessionTimeoutWatch && (
               <div className="mt-4 text-sm">
                 <div className="flex items-center">
-                  <p className="text-neutral-900 ltr:mr-2 rtl:ml-2">{t("session_timeout_after")}</p>
+                  <p className="text-default ltr:mr-2 rtl:ml-2">{t("session_timeout_after")}</p>
                   <Select
                     options={timeoutOptions}
                     defaultValue={
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index c646770411..d2a98ce9be 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -11,7 +11,7 @@ import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="mt-6 mb-8 space-y-6 divide-y">
+      <div className="mt-6 mb-8 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
           <SkeletonText className="h-8 w-full" />
@@ -47,12 +47,12 @@ const TwoFactorAuthView = () => {
         />
         <div>
           <div className="flex">
-            <p className="font-semibold">{t("two_factor_auth")}</p>
+            <p className="text-default font-semibold">{t("two_factor_auth")}</p>
             <Badge className="ml-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
               {user?.twoFactorEnabled ? t("enabled") : t("disabled")}
             </Badge>
           </div>
-          <p className="text-sm text-gray-600">{t("add_an_extra_layer_of_security")}</p>
+          <p className="text-default text-sm">{t("add_an_extra_layer_of_security")}</p>
         </div>
       </div>
 
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 0fac2ad1e4..b8ce131b73 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -1,6 +1,7 @@
 import type { GetServerSidePropsContext } from "next";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
+import type { CSSProperties } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { FormProvider, useForm } from "react-hook-form";
 
@@ -73,20 +74,27 @@ 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"
+        style={
+          {
+            "--cal-brand": "#111827",
+            "--cal-brand-emphasis": "#101010",
+            "--cal-brand-text": "white",
+          } as CSSProperties
+        }
         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 +105,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")}
@@ -209,3 +217,5 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     },
   };
 };
+
+Signup.isThemeSupported = false;
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 1695750ab7..1261bf7554 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -55,13 +55,13 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
   }
 
   const EventTypes = () => (
-    <ul className="dark:border-darkgray-300 rounded-md border border-gray-200">
+    <ul className="dark:border-darkgray-300 border-subtle rounded-md border">
       {team.eventTypes.map((type, index) => (
         <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 border-subtle group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0",
+            !isEmbed && "bg-default"
           )}>
           <div className="px-6 py-4 ">
             <Link
@@ -70,7 +70,7 @@ function TeamPage({ team, isUnpublished }: 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=" text-default text-sm font-semibold">{type.title}</h2>
                 </div>
                 <EventTypeDescription className="text-sm" eventType={type} />
               </div>
@@ -103,16 +103,14 @@ function TeamPage({ team, isUnpublished }: 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">
-            {teamName}
-          </p>
+          <p className="font-cal  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=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                 dangerouslySetInnerHTML={{ __html: team.safeBio }}
               />
             </>
@@ -127,15 +125,16 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
               <div>
                 <div className="relative mt-12">
                   <div className="absolute inset-0 flex items-center" aria-hidden="true">
-                    <div className="dark:border-darkgray-300 w-full border-t border-gray-200" />
+                    <div className="dark:border-darkgray-300 border-subtle w-full border-t" />
                   </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}
@@ -205,4 +204,3 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 };
 
 export default TeamPage;
-TeamPage.isThemeSupported = true;
diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx
index a8f622cae1..69eaadfeaa 100644
--- a/apps/web/pages/team/[slug]/[type].tsx
+++ b/apps/web/pages/team/[slug]/[type].tsx
@@ -23,7 +23,6 @@ export type AvailabilityTeamPageProps = inferSSRProps<typeof getServerSideProps>
 export default function TeamType(props: AvailabilityTeamPageProps) {
   return <AvailabilityPage {...props} />;
 }
-TeamType.isThemeSupported = true;
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const slugParam = asStringOrNull(context.query.slug);
diff --git a/apps/web/pages/team/[slug]/book.tsx b/apps/web/pages/team/[slug]/book.tsx
index 286e8362b1..cc5291f66a 100644
--- a/apps/web/pages/team/[slug]/book.tsx
+++ b/apps/web/pages/team/[slug]/book.tsx
@@ -24,8 +24,6 @@ export default function TeamBookingPage(props: TeamBookingPageProps) {
   return <BookingPage {...props} />;
 }
 
-TeamBookingPage.isThemeSupported = true;
-
 const querySchema = z.object({
   rescheduleUid: z.string().optional(),
   bookingUid: z.string().optional(),
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index 8ff650478b..a02c443f56 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -23,24 +23,24 @@ 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>
                   <div className="mt-4 border-t border-b py-4">
-                    <h2 className="font-cal mb-2 text-center text-lg font-medium text-gray-600">
+                    <h2 className="font-cal text-default mb-2 text-center text-lg font-medium">
                       {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 2469bb7b70..9ebbb664ee 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -20,7 +20,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
           description={
             <>
               <h2 className="mb-2 text-center font-medium">{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/styles/globals.css b/apps/web/styles/globals.css
index 3062ad1a6f..fdfaa7a71d 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -2,19 +2,101 @@
 @tailwind components;
 @tailwind utilities;
 
+: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;
+  --cal-brand-text: white;
+}
+.dark {
+  color-scheme: dark;
+
+  /* background */
+
+  --cal-bg-emphasis: #2b2b2b;
+  --cal-bg: #101010;
+  --cal-bg-subtle: #2b2b2b;
+  --cal-bg-muted: #1c1c1c;
+  --cal-bg-inverted: #f3f4f6;
+
+  /* background -> components*/
+  --cal-bg-info: #dee9fc;
+  --cal-bg-success: #e2fbe8;
+  --cal-bg-attention: #fceed8;
+  --cal-bg-error: #f9e3e2;
+
+  /* Borders */
+  --cal-border-emphasis: #575757;
+  --cal-border: #444444;
+  --cal-border-subtle: #2b2b2b;
+  --cal-border-muted: #1c1c1c;
+
+  /* Content/Text */
+  --cal-text-emphasis: #f3f4f6;
+  --cal-text: #d6d6d6;
+  --cal-text-subtle: #A5a5a5;
+  --cal-text-muted: #575757;
+  --cal-text-inverted: #101010;
+
+  /* Content/Text -> components */
+  --cal-text-info: #253985;
+  --cal-text-success: #285231;
+  --cal-text-attention: #73321b;
+  --cal-text-error: #752522;
+
+  /* Brand shenanigans
+      -> These will be computed for the users theme at runtime.
+    */
+  --cal-brand: #111827;
+  --cal-brand-emphasis: #101010;
+  --cal-brand-text: black;
+}
+
+dark::selection {
+  background: var(--cal-bg-subtle);
+}
 
 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
@@ -25,7 +107,7 @@ body  {
 html.todesktop button,
 html.todesktop a,
 html.todesktop img,
-html.todesktop header{
+html.todesktop header {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -36,15 +118,15 @@ html.todesktop header{
 }
 
 html.todesktop,
-html.todesktop div  {
+html.todesktop div {
   cursor: default !important;
 }
 
 /* make header draggable on desktop app */
-html.todesktop header{
+html.todesktop header {
   -webkit-app-region: drag;
 }
-html.todesktop header button{
+html.todesktop header button {
   -webkit-app-region: no-drag;
 }
 
@@ -73,7 +155,7 @@ html.todesktop header nav {
 }
 
 html.todesktop aside {
-  margin:0px -6px;
+  margin: 0px -6px;
 }
 
 /* TODO: add "native" MacOS colors
@@ -104,7 +186,6 @@ html.todesktop nav a svg{
 }
 */
 
-
 /*
   Adds Utility to hide scrollbar to tailwind
     https://github.com/tailwindlabs/tailwindcss/discussions/2394
@@ -148,37 +229,24 @@ select:focus {
   --tw-ring-color: var(--brand-color);
   border-color: var(--brand-color);
 }
-
+/*  https://stackoverflow.com/a/69308190 */
+input[type="text"]:focus {
+  box-shadow: none;
+}
 
 @layer components {
-  .scroll-bar{
-    @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent
+  .scroll-bar {
+    @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent;
   }
-}
 
 
-button[role="switch"][data-state="checked"] {
-  @apply bg-gray-900;
 }
+
 /* TODO: avoid global specific css */
 /* button[role="switch"][data-state="checked"] span {
   transform: translateX(16px);
 } */
 
-/* DateRangePicker */
-/*
-  TODO:: Remove on V2 launch
- */
-.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;
-}
-
-.react-daterange-picker > .react-daterange-picker__wrapper input {
-  /* Makes sure the on-focus behaviour is like Cal.com's */
-  @apply my-0.5 h-auto rounded-sm py-0.5;
-}
-
 
 @layer components {
   /* slider */
@@ -205,7 +273,6 @@ button[role="switch"][data-state="checked"] {
   .slider .slider-thumb:focus {
     box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
   }
-
 }
 
 /* !important to style multi-email input */
@@ -240,52 +307,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 {
@@ -378,27 +400,7 @@ 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;
-}
-
-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;
-}
-
-nav#nav--settings > a.active {
-  @apply border-gray-500 bg-gray-50 text-gray-700 hover:bg-gray-50 hover:text-gray-700;
-}
-
-nav#nav--settings > a.active svg {
-  @apply text-gray-500;
-}
-
-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..ec0b94395e 100644
--- a/packages/app-store/_components/AppCard.tsx
+++ b/packages/app-store/_components/AppCard.tsx
@@ -1,6 +1,7 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Link from "next/link";
 
+import { classNames } from "@calcom/lib";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Switch } from "@calcom/ui";
 
@@ -28,16 +29,20 @@ export default function AppCard({
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
-    <div className={`mb-4 mt-2 rounded-md border border-gray-200 ${!app.enabled && "grayscale"}`}>
+    <div className={`border-subtle mb-4 mt-2 rounded-md border ${!app.enabled && "grayscale"}`}>
       <div className="p-4 text-sm sm:p-6">
         <div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
           {/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
           <Link href={"/apps/" + app.slug} className="mr-3 h-auto w-10 rounded-sm">
-            <img className="w-full" src={app?.logo} alt={app?.name} />
+            <img
+              className={classNames(app?.logo.includes("-dark") && "dark:invert", "w-full min-w-[40px]")}
+              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>
-            <p className="mb-2 pt-2 text-sm font-normal text-gray-600 ltr:pr-2 rtl:pl-2">
+            <span className="text-emphasis text-base font-semibold leading-4">{app?.name}</span>
+            <p className="text-default mb-2 pt-2 text-sm font-normal ltr:pr-2 rtl:pl-2">
               {description || app?.description}
             </p>
           </div>
@@ -64,7 +69,7 @@ export default function AppCard({
         </div>
       </div>
       <div ref={animationRef}>
-        {app?.isInstalled && switchChecked && <hr />}
+        {app?.isInstalled && switchChecked && <hr className="border-subtle" />}
         {app?.isInstalled && switchChecked ? <div className="p-4 text-sm sm:px-8">{children}</div> : null}
       </div>
     </div>
diff --git a/packages/app-store/_components/AppSettings.tsx b/packages/app-store/_components/AppSettings.tsx
index eef449ed98..9a6a849912 100644
--- a/packages/app-store/_components/AppSettings.tsx
+++ b/packages/app-store/_components/AppSettings.tsx
@@ -5,7 +5,7 @@ import { DynamicComponent } from "./DynamicComponent";
 export const AppSettings = (props: { slug: string }) => {
   return (
     <DynamicComponent<typeof AppSettingsComponentsMap>
-      wrapperClassName="border-t border-gray-200 p-6"
+      wrapperClassName="border-t border-subtle p-6"
       componentMap={AppSettingsComponentsMap}
       {...props}
     />
diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx
index a0e0500c47..5306d4de52 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="bg-emphasis flex h-screen">
+      <div className="bg-default m-auto rounded 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 */}
@@ -32,7 +32,7 @@ export default function AppleCalendarSetup() {
             />
           </div>
           <div>
-            <h1 className="text-gray-600">{t("connect_apple_server")}</h1>
+            <h1 className="text-default">{t("connect_apple_server")}</h1>
 
             <div className="mt-1 text-sm">
               {t("apple_server_generate_password", { appName: APP_NAME })}{" "}
diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx
index 3e30981397..6d349f08f0 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="bg-emphasis flex h-screen">
+      <div className="bg-default m-auto rounded 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 */}
@@ -33,7 +33,7 @@ export default function CalDavCalendarSetup() {
             />
           </div>
           <div className="flex w-10/12 flex-col">
-            <h1 className="text-gray-600">{t("connect_caldav_server")}</h1>
+            <h1 className="text-default">{t("connect_caldav_server")}</h1>
             <div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
             <div className="my-2 mt-3">
               <Form
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index df25d6b587..803079e2c1 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 */}
@@ -47,7 +47,7 @@ export default function CloseComSetup() {
             />
           </div>
           <div>
-            <h1 className="text-gray-600">{t("provide_api_key")}</h1>
+            <h1 className="text-default">{t("provide_api_key")}</h1>
 
             <div className="mt-1 text-sm">
               {t("generate_api_key_description", { appName: "Close.com" })}{" "}
@@ -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..1509adba57 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="bg-emphasis flex h-screen">
+      <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
         <div>
           <img
             src="/api/app-store/exchange2013calendar/icon.svg"
@@ -30,7 +30,7 @@ export default function Exchange2013CalendarSetup() {
           />
         </div>
         <div className="flex w-10/12 flex-col">
-          <h1 className="text-gray-600">{t("add_exchange2013")}</h1>
+          <h1 className="text-default">{t("add_exchange2013")}</h1>
           <div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
           <div className="my-2 mt-3">
             <Form
diff --git a/packages/app-store/exchange2016calendar/pages/setup/index.tsx b/packages/app-store/exchange2016calendar/pages/setup/index.tsx
index 52d2ea5283..273a28086a 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="bg-emphasis flex h-screen">
+      <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
         <div>
           <img
             src="/api/app-store/exchange2016calendar/icon.svg"
@@ -30,7 +30,7 @@ export default function Exchange2016CalendarSetup() {
           />
         </div>
         <div className="flex w-10/12 flex-col">
-          <h1 className="text-gray-600">{t("add_exchange2016")}</h1>
+          <h1 className="text-default">{t("add_exchange2016")}</h1>
           <div className="mt-1 text-sm">{t("credentials_stored_encrypted")}</div>
           <div className="my-2 mt-3">
             <Form
diff --git a/packages/app-store/exchangecalendar/pages/setup/index.tsx b/packages/app-store/exchangecalendar/pages/setup/index.tsx
index 0f1a9c6691..3ca0370241 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="bg-emphasis flex h-screen">
+        <div className="bg-default m-auto rounded 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 */}
@@ -54,7 +54,7 @@ export default function ExchangeSetup() {
               />
             </div>
             <div className="grow">
-              <h1 className="text-gray-600">{t("exchange_add")}</h1>
+              <h1 className="text-default">{t("exchange_add")}</h1>
               <div className="text-sm">{t("credentials_stored_encrypted")}</div>
               <div className="my-2 mt-5">
                 <Form
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..ac688838e1 100644
--- a/packages/app-store/routing-forms/components/FormInputFields.tsx
+++ b/packages/app-store/routing-forms/components/FormInputFields.tsx
@@ -40,10 +40,7 @@ export default function FormInputFields(props: Props) {
         return (
           <div key={field.id} className="mb-4 block flex-col sm:flex ">
             <div className="min-w-48 mb-2 flex-grow">
-              <label
-                id="slug-label"
-                htmlFor="slug"
-                className="flex text-sm font-medium text-gray-700 dark:text-white">
+              <label id="slug-label" htmlFor="slug" className="text-default 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..2e4447d775 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -309,8 +309,10 @@ 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>
-                      <p className="-mt-1 text-xs leading-normal text-gray-600">
+                      <div className="text-emphasis mb-2 block text-sm font-semibold leading-none ">
+                        Routers
+                      </div>
+                      <p className="text-default -mt-1 text-xs leading-normal">
                         {t("modifications_in_fields_warning")}
                       </p>
                       <div className="flex">
@@ -329,10 +331,10 @@ 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">
+                      <p className="text-default -mt-1 text-xs leading-normal">
                         {t("form_modifications_warning")}
                       </p>
                       <div className="flex">
@@ -368,7 +370,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                     </>
                   )}
                 </div>
-                <div className="w-full rounded-md border border-gray-200 p-8">
+                <div className="border-subtle w-full rounded-md border p-8">
                   <RoutingNavBar appUrl={appUrl} form={form} />
                   <Page hookForm={hookForm} form={form} appUrl={appUrl} />
                 </div>
@@ -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 text-default 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/styles.css b/packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css
index 522c847766..fd222750a2 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/styles.css
@@ -122,7 +122,6 @@
 }
 
 .cal-query-builder .rule {
-  background-color: white;
   border: 1px solid transparent;
   padding: 10px;
   flex: 1;
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..891d62e007 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=" border-default bg-default dark:bg-muted text-default disabled:bg-emphasis disabled:dark:text-subtle placeholder:text-subtle block w-full rounded-md text-sm focus:ring-black disabled:hover:cursor-not-allowed "
       {...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="focus:border-brand-default bg-default dark:bg-muted  border-default disabled:bg-emphasis focus:ring-brand block w-full rounded-md text-sm disabled:hover:cursor-not-allowed"
       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="focus:border-brand-default bg-default dark:bg-muted  border-default disabled:bg-emphasis focus:ring-brand block w-full rounded-md text-sm disabled:hover:cursor-not-allowed"
       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="mb-2"
       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 mb-2"
       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/config.json b/packages/app-store/routing-forms/config.json
index ca4f26e287..01335feb13 100644
--- a/packages/app-store/routing-forms/config.json
+++ b/packages/app-store/routing-forms/config.json
@@ -4,8 +4,8 @@
   "title": "Routing Forms",
   "slug": "routing-forms",
   "type": "routing-forms_other",
-  "imageSrc": "/api/app-store/routing-forms/icon.svg",
-  "logo": "/api/app-store/routing-forms/icon.svg",
+  "imageSrc": "/api/app-store/routing-forms/icon-dark.svg",
+  "logo": "/api/app-store/routing-forms/icon-dark.svg",
   "url": "https://cal.com/apps/routing-forms",
   "variant": "other",
   "categories": ["other"],
diff --git a/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx b/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
index c9a8322fa4..e1c6a567c7 100644
--- a/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
@@ -332,6 +332,7 @@ export default function FormEditPage({
     />
   );
 }
+FormEditPage.isThemeSupported = true;
 
 FormEditPage.getLayout = (page: React.ReactElement) => {
   return (
diff --git a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
index b7bd06ec4d..39970b23df 100644
--- a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
@@ -110,7 +110,11 @@ export default function RoutingForms({
               <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
                 {t("upgrade")}
               </Button>
-              <Button color="minimal" href="https://go.cal.com/teams-video" target="_blank">
+              <Button
+                color="minimal"
+                className="text-inverted !bg-transparent opacity-50 hover:opacity-100"
+                href="https://go.cal.com/teams-video"
+                target="_blank">
                 {t("learn_more")}
               </Button>
             </ButtonGroup>
@@ -128,7 +132,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) {
@@ -252,6 +256,8 @@ export default function RoutingForms({
   );
 }
 
+RoutingForms.isThemeSupported = true;
+
 RoutingForms.getLayout = (page: React.ReactElement) => {
   return <Shell withoutMain={true}>{page}</Shell>;
 };
diff --git a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
index 695afe8b7b..714e0a2053 100644
--- a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
@@ -64,12 +64,14 @@ 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 mx-3 mb-4 table-fixed border-separate border-spacing-0 overflow-hidden rounded-md border">
+        <tr
+          data-testid="reporting-header"
+          className="border-default text-default bg-emphasis rounded-md 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 +89,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 +97,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"
                         )}
@@ -109,16 +111,18 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
             });
           })}
       </table>
-      {isLoading ? <div className="p-2">Report is loading</div> : ""}
-      <Button
-        type="button"
-        color="minimal"
-        ref={buttonInView.ref}
-        loading={isFetchingNextPage}
-        disabled={!hasNextPage}
-        onClick={() => fetchNextPage()}>
-        {hasNextPage ? t("load_more_results") : t("no_more_results")}
-      </Button>
+      {isLoading ? <div className="text-default p-2">{t("loading")}</div> : ""}
+      {hasNextPage && (
+        <Button
+          type="button"
+          color="minimal"
+          ref={buttonInView.ref}
+          loading={isFetchingNextPage}
+          disabled={!hasNextPage}
+          onClick={() => fetchNextPage()}>
+          {hasNextPage ? t("load_more_results") : t("no_more_results")}
+        </Button>
+      )}
     </div>
   );
 };
@@ -193,6 +197,8 @@ export default function ReporterWrapper({
   );
 }
 
+ReporterWrapper.isThemeSupported = true;
+
 ReporterWrapper.getLayout = (page: React.ReactElement) => {
   return (
     <Shell backPath="/apps/routing-forms/forms" withoutMain={true}>
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..ae3b0fa40e 100644
--- a/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/route-builder/[...appPages].tsx
@@ -16,6 +16,7 @@ import {
   TextArea,
   TextField,
   Badge,
+  Divider,
 } from "@calcom/ui";
 
 import SingleForm, {
@@ -143,7 +144,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 +169,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 +203,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 +213,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
@@ -244,7 +245,7 @@ const Route = ({
 
             {((route.isFallback && hasRules(route)) || !route.isFallback) && (
               <>
-                <hr className="my-6 text-gray-200" />
+                <Divider className="mt-3 mb-6" />
                 <Query
                   {...config}
                   value={route.state.tree}
@@ -522,6 +523,7 @@ export default function RouteBuilder({
     />
   );
 }
+RouteBuilder.isThemeSupported = true;
 
 RouteBuilder.getLayout = (page: React.ReactElement) => {
   return (
diff --git a/packages/app-store/routing-forms/pages/router/[...appPages].tsx b/packages/app-store/routing-forms/pages/router/[...appPages].tsx
index 85ed598a6c..6ca33edcc1 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="bg-default -mx-4 rounded-sm border border-neutral-200 p-4 py-6 sm:mx-0 sm:px-8">
             <div>{message}</div>
           </div>
         </div>
@@ -26,6 +26,8 @@ export default function Router({ form, message }: inferSSRProps<typeof getServer
   );
 }
 
+Router.isThemeSupported = true;
+
 const querySchema = z
   .object({
     form: z.string(),
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..83b8b7d34e 100644
--- a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
@@ -6,25 +6,43 @@ import { Toaster } from "react-hot-toast";
 import { v4 as uuidv4 } from "uuid";
 
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { trpc } from "@calcom/trpc/react";
 import type { AppGetServerSidePropsContext, AppPrisma } from "@calcom/types/AppGetServerSideProps";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button, showToast } from "@calcom/ui";
+import { Button, showToast, useCalcomTheme } from "@calcom/ui";
 
 import FormInputFields from "../../components/FormInputFields";
 import { getSerializableForm } from "../../lib/getSerializableForm";
 import { processRoute } from "../../lib/processRoute";
 import type { Response, Route } from "../../types/types";
 
+const useBrandColors = ({
+  brandColor,
+  darkBrandColor,
+}: {
+  brandColor?: string | null;
+  darkBrandColor?: string | null;
+}) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+};
+
 function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getServerSideProps>) {
   const [customPageMessage, setCustomPageMessage] = useState<Route["action"]["value"]>("");
   const formFillerIdRef = useRef(uuidv4());
   const isEmbed = useIsEmbed(restProps.isEmbed);
   useTheme(profile.theme);
+  useBrandColors({
+    brandColor: profile.brandColor,
+    darkBrandColor: profile.darkBrandColor,
+  });
   // TODO: We might want to prevent spam from a single user by having same formFillerId across pageviews
   // But technically, a user can fill form multiple times due to any number of reasons and we currently can't differentiate b/w that.
   // - like a network error
@@ -94,8 +112,6 @@ function RoutingForm({ form, profile, ...restProps }: inferSSRProps<typeof getSe
 
   return (
     <div>
-      <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
-
       <div>
         {!customPageMessage ? (
           <>
@@ -104,18 +120,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  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">
-                          {form.description}
-                        </p>
+                        <p className="min-h-10 text-subtle text-sm ltr:mr-4 rtl:ml-4">{form.description}</p>
                       ) : null}
                     </div>
                     <FormInputFields form={form} response={response} setResponse={setResponse} />
@@ -136,8 +150,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="text-emphasis">{customPageMessage}</div>
               </div>
             </div>
           </div>
diff --git a/packages/app-store/routing-forms/static/icon.svg b/packages/app-store/routing-forms/static/icon-dark.svg
similarity index 100%
rename from packages/app-store/routing-forms/static/icon.svg
rename to packages/app-store/routing-forms/static/icon-dark.svg
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index 565c4cd9a3..0721438ba5 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -35,14 +35,14 @@ 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" />
           </div>
           <div>
-            <h1 className="text-gray-600">{t("provide_api_key")}</h1>
+            <h1 className="text-default">{t("provide_api_key")}</h1>
 
             <div className="mt-1 text-sm">
               {t("generate_api_key_description", { appName: "Sendgrid" })}{" "}
@@ -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/sirius_video/config.json b/packages/app-store/sirius_video/config.json
index 900fa8c6a2..120add1178 100644
--- a/packages/app-store/sirius_video/config.json
+++ b/packages/app-store/sirius_video/config.json
@@ -3,8 +3,8 @@
   "name": "Sirius Video",
   "slug": "sirius_video",
   "type": "sirius_video_video",
-  "imageSrc": "/api/app-store/sirius_video/icon.svg",
-  "logo": "/api/app-store/sirius_video/icon.svg",
+  "imageSrc": "/api/app-store/sirius_video/icon-dark.svg",
+  "logo": "/api/app-store/sirius_video/icon-dark.svg",
   "url": "https://cal.com/apps/sirius_video",
   "variant": "conferencing",
   "categories": ["video"],
diff --git a/packages/app-store/sirius_video/static/icon.svg b/packages/app-store/sirius_video/static/icon-dark.svg
similarity index 100%
rename from packages/app-store/sirius_video/static/icon.svg
rename to packages/app-store/sirius_video/static/icon-dark.svg
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/config.json b/packages/app-store/typeform/config.json
index 4b7ade942a..878d9c1dff 100644
--- a/packages/app-store/typeform/config.json
+++ b/packages/app-store/typeform/config.json
@@ -3,7 +3,7 @@
   "name": "Typeform",
   "slug": "typeform",
   "type": "typeform_other",
-  "logo": "/api/app-store/typeform/icon.svg",
+  "logo": "/api/app-store/typeform/icon-dark.svg",
   "url": "https://cal.com/apps/typeform",
   "variant": "other",
   "categories": ["other"],
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..8e28a33eb9 100644
--- a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+++ b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
@@ -7,18 +7,18 @@ 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" />
           </div>
           <div className="ml-5">
-            <div className="text-md text-gray-800">How to route a Typeform with Cal.com Routing</div>
+            <div className="text-md text-default">How to route a Typeform with Cal.com Routing</div>
             <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/typeform/static/icon.svg b/packages/app-store/typeform/static/icon-dark.svg
similarity index 100%
rename from packages/app-store/typeform/static/icon.svg
rename to packages/app-store/typeform/static/icon-dark.svg
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/whereby/config.json b/packages/app-store/whereby/config.json
index 470e49d6c5..959ae5ae8a 100644
--- a/packages/app-store/whereby/config.json
+++ b/packages/app-store/whereby/config.json
@@ -4,8 +4,8 @@
   "title": "Whereby",
   "slug": "whereby",
   "type": "whereby_video",
-  "imageSrc": "/api/app-store/whereby/icon.svg",
-  "logo": "/api/app-store/whereby/icon.svg",
+  "imageSrc": "/api/app-store/whereby/icon-dark.svg",
+  "logo": "/api/app-store/whereby/icon-dark.svg",
   "url": "https://cal.com/apps/whereby",
   "variant": "conferencing",
   "categories": ["video"],
diff --git a/packages/app-store/whereby/static/icon.svg b/packages/app-store/whereby/static/icon-dark.svg
similarity index 100%
rename from packages/app-store/whereby/static/icon.svg
rename to packages/app-store/whereby/static/icon-dark.svg
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/wordpress/config.json b/packages/app-store/wordpress/config.json
index d45a5e1087..fd93647e00 100644
--- a/packages/app-store/wordpress/config.json
+++ b/packages/app-store/wordpress/config.json
@@ -3,8 +3,8 @@
   "name": "Wordpress",
   "slug": "wordpress",
   "type": "wordpress_other",
-  "imageSrc": "/api/app-store/wordpress/icon.svg",
-  "logo": "/api/app-store/wordpress/icon.svg",
+  "imageSrc": "/api/app-store/wordpress/icon-dark.svg",
+  "logo": "/api/app-store/wordpress/icon-dark.svg",
   "url": "https://github.com/calcom/wp-plugin",
   "variant": "other",
   "categories": ["other"],
diff --git a/packages/app-store/wordpress/static/icon-dark.svg b/packages/app-store/wordpress/static/icon-dark.svg
new file mode 100644
index 0000000000..7fb73c70cb
--- /dev/null
+++ b/packages/app-store/wordpress/static/icon-dark.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>
\ No newline at end of file
diff --git a/packages/app-store/wordpress/static/icon.svg b/packages/app-store/wordpress/static/icon.svg
deleted file mode 100644
index 72183e9042..0000000000
--- a/packages/app-store/wordpress/static/icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg"><g fill="#464342"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>
\ No newline at end of file
diff --git a/packages/app-store/zapier/components/TemplateCard.tsx b/packages/app-store/zapier/components/TemplateCard.tsx
index f860c3bffd..a049c6d276 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 border-subtle sticky flex flex-col justify-between gap-4 rounded-md border 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..1c35de1a72 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -41,19 +41,19 @@ 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="bg-emphasis absolute z-50 flex h-screen w-full items-center" />;
   }
 
   return (
-    <div className="flex h-screen bg-gray-200">
+    <div className="bg-emphasis flex h-screen">
       {showContent ? (
-        <div className="m-auto max-w-[43em] overflow-auto rounded bg-white pb-10 md:p-10">
+        <div className="bg-default m-auto max-w-[43em] overflow-auto rounded 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" />
             </div>
             <div className="ml-2 ltr:mr-2 rtl:ml-2 md:ml-5">
-              <div className="text-gray-600">{t("setting_up_zapier")}</div>
+              <div className="text-default">{t("setting_up_zapier")}</div>
               {!newApiKey ? (
                 <>
                   <div className="mt-1 text-xl">{t("generate_api_key")}:</div>
@@ -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="bg-subtle h-full w-full whitespace-pre-wrap rounded-md py-[6px] pl-2 pr-2 sm:rounded-r-none sm:pr-5">
                       {newApiKey}
                     </code>
                     <Tooltip side="top" content={t("copy_to_clipboard")}>
@@ -81,9 +81,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                       </Button>
                     </Tooltip>
                   </div>
-                  <div className="mt-2 mb-5 text-sm font-semibold text-gray-600">
-                    {t("copy_safe_api_key")}
-                  </div>
+                  <div className="text-default mt-2 mb-5 text-sm font-semibold">{t("copy_safe_api_key")}</div>
                 </>
               )}
 
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 41545a0fe9..9d29f9456c 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -15,32 +15,20 @@ 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)",
+        default: "var(--cal-bg, white)",
+        subtle: "var(--cal-bg-subtle)",
+        muted: "var(--cal-bg-muted)",
+        inverted: "var(--cal-bg-inverted)",
+        info: "var(--cal-bg-info)",
+        success: "var(--cal-bg-success)",
+        attention: "var(--cal-bg-attention)",
+        error: "var(--cal-bg-error)",
         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')",
+          subtle: "var(--cal-brand-subtle,'#9CA3AF')",
         },
         gray: {
           50: "#F9FAFB",
@@ -54,79 +42,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 +55,36 @@ 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)",
+        brand: "var(--cal-brand-text,'white')",
+      },
+      fill: {
+        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)",
+        brand: "var(--cal-brand-text)",
+      },
       screens: {
         pwa: { raw: "(display-mode: standalone)" },
       },
@@ -208,6 +153,13 @@ module.exports = {
       addVariant("windows", ".windows &");
       addVariant("ios", ".ios &");
     }),
+    plugin(({ addBase, theme }) => {
+      addBase({
+        hr: {
+          borderColor: theme("subtle"),
+        },
+      });
+    }),
   ],
   variants: {
     scrollbar: ["rounded", "dark"],
diff --git a/packages/config/theme/colors.css b/packages/config/theme/colors.css
new file mode 100644
index 0000000000..f54ed20f7f
--- /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 shenanigans
+    -> 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: #2b2b2b;
+  --cal-bg: #111111;
+  --cal-bg-subtle: #1c1c1c;
+  --cal-bg-muted: #101010;
+  --cal-bg-inverted: #f3f4f6;
+
+  /* background -> components*/
+  --cal-bg-info: #DEE9FC;
+  --cal-bg-success: #E2FBE8;
+  --cal-bg-attention: #FCEED8;
+  --cal-bg-error: #F9E3E2;
+
+
+  /* Borders */
+  --cal-border-emphasis:#575757;
+  --cal-border: #444444;
+  --cal-border-subtle:#2b2b2b;
+  --cal-border-muted:#1c1c1c;
+
+  /* Content/Text */
+  --cal-text-emphasis: #f3f4f6;
+  --cal-text:#d6d6d6;
+  --cal-text-subtle:#767676;
+  --cal-text-muted:#575757;
+  --cal-text-inverted:white;
+
+  /* Content/Text -> components */
+  --cal-text-info:#253985;
+  --cal-text-success:#285231;
+  --cal-text-attention:#73321B;
+  --cal-text-error:#752522;
+
+  /* Brand shenanigans
+    -> 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/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 5522d91ad0..d17777c612 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -98,13 +98,6 @@ interface EmbedNonStylesConfig {
   align?: "left";
   branding?: {
     brandColor?: string;
-    lightColor?: string;
-    lighterColor?: string;
-    lightestColor?: string;
-    highlightColor?: string;
-    darkColor?: string;
-    darkerColor?: string;
-    medianColor?: string;
   };
 }
 
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index d0b2eeb63c..03179288a7 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 bg-default mb-4 rounded-md 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..60198e26e0 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="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
+      <div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
+        <div className="text-default 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="text-default mr-auto self-center truncate text-sm font-medium">
           {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 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
         />
       </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 focus-within:bg-subtle focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer"
             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="text-default ml-2 mr-auto self-center truncate text-sm font-medium 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 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
             />
           </div>
         ))}
diff --git a/packages/features/bookings/components/TeamFilter.tsx b/packages/features/bookings/components/TeamFilter.tsx
index 199d12afcf..40ad4673ae 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="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
+      <div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
+        <div className="text-default 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="text-default mr-auto self-center truncate text-sm font-medium">
           {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 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
         />
       </div>
-      <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
-        <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
+      <div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
+        <div className="text-default 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="text-default mr-auto self-center truncate text-sm font-medium">
           {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 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
         />
       </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 focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer"
             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="text-default ml-2 mr-auto select-none self-center truncate text-sm font-medium 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 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
             />
           </div>
         ))}
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 1f7c87f49b..056f768803 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -51,12 +51,12 @@ export const Day = ({
       type="button"
       style={disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }}
       className={classNames(
-        "disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center font-medium disabled:cursor-default disabled:border-transparent disabled:font-light disabled:dark:border-transparent",
+        "disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-md border-2 border-transparent text-center text-sm font-medium disabled:cursor-default disabled:border-transparent disabled:font-light ",
         active
-          ? "dark:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkmodebrandcontrast bg-brand text-brandcontrast border-2"
+          ? "bg-brand-default text-brand"
           : !disabled
-          ? "dark:bg-darkgray-200 hover:border-brand dark:hover:border-darkmodebrand bg-gray-100 dark:text-white"
-          : ""
+          ? " hover:border-brand-default text-emphasis bg-emphasis"
+          : "text-muted"
       )}
       data-testid="day"
       data-disabled={disabled}
@@ -80,10 +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">
-        {t("no_availability_in_month", { month: month })}
-      </h4>
+    <div className=" bg-muted border-subtle absolute top-40 left-1/2 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border p-8 shadow-sm">
+      <h4 className="text-emphasis  mb-4 font-medium">{t("no_availability_in_month", { month: month })}</h4>
       <Button onClick={nextMonthButton} color="primary" EndIcon={FiArrowRight}>
         {t("view_next_month")}
       </Button>
@@ -146,7 +144,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=" bg-muted text-muted opcaity-50 absolute top-0 left-0 right-0 bottom-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center"
               key={`e-${idx}`}
               disabled>
               <SkeletonText className="h-4 w-5" />
@@ -199,23 +197,23 @@ const DatePicker = ({
   return (
     <div className={className}>
       <div className="mb-4 flex items-center justify-between text-xl font-light">
-        <span className="w-1/2 text-base dark:text-white">
+        <span className="text-default w-1/2 text-base">
           {browsingDate ? (
             <>
-              <strong className="text-bookingdarker font-semibold dark:text-white">{month}</strong>{" "}
-              <span className="text-bookinglight">{browsingDate.format("YYYY")}</span>
+              <strong className="text-emphasis font-semibold">{month}</strong>{" "}
+              <span className="text-subtle">{browsingDate.format("YYYY")}</span>
             </>
           ) : (
             <SkeletonText className="h-8 w-24" />
           )}
         </span>
-        <div className="text-black dark:text-white">
+        <div className="text-emphasis">
           <div className="flex">
             <Button
               className={classNames(
-                "group p-1 opacity-50 hover:opacity-100",
+                "group p-1 opacity-70 hover:opacity-100",
                 !browsingDate.isAfter(dayjs()) &&
-                  "disabled:text-bookinglighter hover:bg-background hover:opacity-50"
+                  "disabled:text-bookinglighter hover:bg-background hover:opacity-70"
               )}
               onClick={() => changeMonth(-1)}
               disabled={!browsingDate.isAfter(dayjs())}
@@ -225,7 +223,7 @@ const DatePicker = ({
               StartIcon={ChevronLeftIcon}
             />
             <Button
-              className="group p-1 opacity-50 hover:opacity-100"
+              className="group p-1 opacity-70 hover:opacity-100"
               onClick={() => changeMonth(+1)}
               data-testid="incrementMonth"
               color="minimal"
@@ -235,11 +233,9 @@ const DatePicker = ({
           </div>
         </div>
       </div>
-      <div className="border-bookinglightest mb-2 grid grid-cols-7 gap-4 border-t border-b text-center dark:border-neutral-900 md:mb-0 md:border-0">
+      <div className="border-subtle mb-2 grid grid-cols-7 gap-4 border-t border-b text-center md:mb-0 md:border-0">
         {weekdayNames(locale, weekStart, "short").map((weekDay) => (
-          <div
-            key={weekDay}
-            className="text-bookinglight dark:text-darkgray-900 my-4 text-xs uppercase tracking-widest">
+          <div key={weekDay} className="text-emphasis my-4 text-xs uppercase tracking-widest">
             {weekDay}
           </div>
         ))}
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index d5a7a22423..5120a58060 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>
   );
 };
@@ -128,7 +128,7 @@ const DestinationCalendarSelector = ({
           !hidePlaceholder ? (
             `${t("select_destination_calendar")}`
           ) : (
-            <span className="min-w-0 overflow-hidden truncate whitespace-nowrap">
+            <span className="text-default min-w-0 overflow-hidden truncate whitespace-nowrap">
               {t("default_calendar_selected")}{" "}
               {queryDestinationCalendar.name &&
                 `| ${queryDestinationCalendar.name} (${queryDestinationCalendar?.integrationTitle} - ${queryDestinationCalendar.primaryEmail})`}
@@ -151,7 +151,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..aa8511d578 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-muted" />
               <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 bbe7b68587..aac59a1060 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -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 text-default mb-2 w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono">
                 {" "}
                 {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..3970a5cf49 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,
@@ -45,10 +46,10 @@ const ApiKeyListItem = ({
         <div className="flex items-center space-x-3.5">
           {!neverExpires && isExpired && <Badge variant="red">{t("expired")}</Badge>}
           {!isExpired && <Badge variant="green">{t("active")}</Badge>}
-          <p className="text-xs text-gray-600">
+          <p className="text-default text-xs">
             {" "}
             {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..ae72e539c6 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 text-default flex w-full items-center truncate rounded rounded-r-none pl-2 font-mono">
             {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 text-default flex w-full items-center truncate rounded rounded-r-none pl-2 font-mono">
             {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 text-default flex w-full items-center truncate rounded rounded-r-none pl-2 font-mono">
             {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 616b5661a2..0b8bb1017d 100644
--- a/packages/features/ee/sso/page/teams-sso-view.tsx
+++ b/packages/features/ee/sso/page/teams-sso-view.tsx
@@ -41,7 +41,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 61b119786c..441ce9efef 100644
--- a/packages/features/ee/sso/page/user-sso-view.tsx
+++ b/packages/features/ee/sso/page/user-sso-view.tsx
@@ -19,7 +19,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 bce68c52f4..64b563cd90 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -4,7 +4,7 @@ import { useChat } from "react-live-chat-loader";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, showToast } from "@calcom/ui";
+import { Button, showToast, TextArea } from "@calcom/ui";
 import { FiExternalLink, FiAlertTriangle } from "@calcom/ui/components/icon";
 
 import { useFreshChat } from "../lib/freshchat/FreshChatProvider";
@@ -45,19 +45,19 @@ 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
           onClick={() => onHelpItemSelect()}
           href="https://cal.com/docs/"
           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("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"
             )}
           />
@@ -67,17 +67,12 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         </div>
       </div>
 
-      <hr className="bg-gray-200 " />
+      <hr className="border-muted" />
       <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>
-        <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"
-        />
+        <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)} />
 
         <div className="my-3 flex justify-end">
           <button
@@ -177,7 +172,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>
@@ -188,10 +183,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 bg-muted w-full p-5">
         <p className="">{t("specific_issue")}</p>
         <button
-          className="font-medium underline hover:text-gray-700"
+          className="hover:text-emphasis text-defualt font-medium underline"
           onClick={() => {
             setActive(true);
             if (isFreshChatEnabled) {
@@ -209,8 +204,8 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         <span> {t("or").toLowerCase()} </span>
         <a
           onClick={() => onHelpItemSelect()}
-          className="font-medium underline hover:text-gray-700"
-          href="https://cal.com/docs/"
+          className="hover:text-emphasis text-defualt font-medium underline"
+          href="https://cal.com/docs"
           target="_blank"
           rel="noreferrer">
           {t("browse_our_docs")}
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 51f9c75068..feb45efaad 100644
--- a/packages/features/ee/support/lib/intercom/IntercomMenuItem.tsx
+++ b/packages/features/ee/support/lib/intercom/IntercomMenuItem.tsx
@@ -19,7 +19,7 @@ export default function IntercomMenuItem(props: IntercomMenuItemProps) {
         open();
         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 b40b00ceb0..c9502db78f 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -72,7 +72,7 @@ export const AddNewTeamMembersForm = ({
   return (
     <>
       <div>
-        <ul className="rounded-md border" data-testid="pending-member-list">
+        <ul className="border-subtle rounded-md border" data-testid="pending-member-list">
           {defaultValues.members.map((member, index) => (
             <PendingMemberItem key={member.email} member={member} index={index} teamId={teamId} />
           ))}
@@ -100,7 +100,7 @@ export const AddNewTeamMembersForm = ({
         }}
         members={defaultValues.members}
       />
-      <hr className="my-6 border-neutral-200" />
+      <hr className="border-subtle my-6" />
       <Button
         EndIcon={FiArrowRight}
         className="mt-6 w-full justify-center"
@@ -121,7 +121,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">
@@ -170,9 +170,9 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
             {member.role === "ADMIN" && <Badge variant="default">{t("admin")}</Badge>}
           </div>
           {member.username ? (
-            <p className="text-gray-600">{`${WEBAPP_URL}/${member.username}`}</p>
+            <p className="text-default">{`${WEBAPP_URL}/${member.username}`}</p>
           ) : (
-            <p className="text-gray-600">{t("not_on_cal", { appName: APP_NAME })}</p>
+            <p className="text-default">{t("not_on_cal", { appName: APP_NAME })}</p>
           )}
         </div>
       </div>
diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
index 1dc42a91a7..a9d09b7b5f 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -72,6 +72,7 @@ export const CreateANewTeamForm = () => {
               <>
                 <TextField
                   className="mt-2"
+                  placeholder="Acme Inc."
                   name="name"
                   label={t("team_name")}
                   defaultValue={value}
@@ -97,6 +98,7 @@ export const CreateANewTeamForm = () => {
               <TextField
                 className="mt-2"
                 name="slug"
+                placeholder="acme"
                 label={t("team_url")}
                 addOnLeading={`${process.env.NEXT_PUBLIC_WEBSITE_URL?.replace("https://", "")?.replace(
                   "http://",
diff --git a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
index 77aa579f91..5bad6da5a1 100644
--- a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
+++ b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
@@ -37,12 +37,12 @@ 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>
           </div>
-          <p className={classNames("text-sm leading-5 ", disabled ? "text-gray-300" : "text-gray-600")}>
+          <p className={classNames("text-sm leading-5 ", disabled ? "text-gray-300" : "text-default")}>
             {t("team_impersonation_description")}
           </p>
         </div>
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 68c35bf5a4..7bce2f769e 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -110,25 +110,22 @@ export default function MemberListItem(props: Props) {
 
             <div className="inline-block ltr:ml-3 rtl:mr-3">
               <div className="mb-1 flex">
-                <span className="mr-1 text-sm font-bold leading-4">{name}</span>
+                <span className="text-default mr-1 text-sm font-bold leading-4">{name}</span>
 
                 {!props.member.accepted && <TeamPill color="orange" text={t("pending")} />}
                 {props.member.role && <TeamRole role={props.member.role} />}
               </div>
-              <div className="flex items-center">
-                <span
-                  className="block text-sm text-gray-600"
-                  data-testid="member-email"
-                  data-email={props.member.email}>
+              <div className="text-default flex items-center">
+                <span className=" block text-sm" data-testid="member-email" data-email={props.member.email}>
                   {props.member.email}
                 </span>
                 {bookingLink && (
                   <>
-                    <span className="mx-2 block text-gray-600">•</span>
+                    <span className="mx-2 block text-default">•</span>
                     <a
                       target="_blank"
                       href={`${WEBAPP_URL}/${props.member.username}`}
-                      className="block text-sm text-gray-600">
+                      className="block text-sm text-default">
                       {bookingLink}
                     </a>
                   </>
@@ -139,7 +136,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..b44d9edcf1 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-subtle 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..65d98f45be 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,12 +39,12 @@ 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">
-            <span className="font-bold text-gray-600">Date</span>
+            <span className="text-default font-bold">Date</span>
             <DatePicker
               date={selectedDate.toDate()}
               onDatesChange={(newDate) => {
@@ -52,17 +53,17 @@ export default function TeamAvailabilityModal(props: Props) {
             />
           </div>
           <div>
-            <span className="font-bold text-gray-600">Timezone</span>
+            <span className="text-default font-bold">Timezone</span>
             <TimezoneSelect
               id="timeZone"
               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>
-            <span className="font-bold text-gray-600">Slot Length</span>
+            <span className="text-default font-bold">Slot Length</span>
             <Select
               options={[
                 { value: 15, label: "15 minutes" },
@@ -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..fa47c65f53 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";
 
@@ -32,7 +34,7 @@ export default function TeamAvailabilityScreen(props: Props) {
     if (!member) return <></>;
 
     return (
-      <div key={member.id} style={style} className="flex border-r border-gray-200 pl-4 ">
+      <div key={member.id} style={style} className="flex border-r border-subtle pl-4 ">
         <TeamAvailabilityTimes
           teamId={props.team?.id as number}
           memberId={member.id}
@@ -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="flex w-full space-x-5 border-b border-gray-200 p-4 rtl:space-x-reverse">
+    <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-subtle 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..974f1b594d 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  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 17b74831f0..e5b25e6354 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -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",
@@ -89,7 +89,7 @@ export default function TeamInviteListItem(props: Props) {
             <div className="hidden sm:flex">
               <Button
                 type="button"
-                className="mr-3 border-gray-700"
+                className="mr-3 border-empthasis"
                 variant="icon"
                 color="secondary"
                 onClick={declineInvite}
@@ -97,7 +97,7 @@ export default function TeamInviteListItem(props: Props) {
               />
               <Button
                 type="button"
-                className="border-gray-700"
+                className="border-empthasis"
                 variant="icon"
                 color="secondary"
                 onClick={acceptInvite}
diff --git a/packages/features/ee/teams/components/TeamList.tsx b/packages/features/ee/teams/components/TeamList.tsx
index 9993ee49dc..261bf86efa 100644
--- a/packages/features/ee/teams/components/TeamList.tsx
+++ b/packages/features/ee/teams/components/TeamList.tsx
@@ -43,7 +43,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 divide-subtle border-subtle mb-2 divide-y rounded border">
       {props.teams.map((team) => (
         <TeamListItem
           key={team?.id as number}
@@ -62,8 +62,8 @@ export default function TeamList(props: Props) {
             (team, i) =>
               team.role !== "MEMBER" &&
               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" />}
@@ -75,7 +75,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 91f83149c4..807cdacb41 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -106,8 +106,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>
@@ -132,11 +132,7 @@ export default function TeamListItem(props: Props) {
         }}
         members={teamQuery?.data?.members || []}
       />
-      <div
-        className={classNames(
-          "flex items-center  justify-between",
-          !isInvitee && "group hover:bg-neutral-50"
-        )}>
+      <div className={classNames("flex items-center  justify-between", !isInvitee && "hover:bg-muted group")}>
         {!isInvitee ? (
           <Link
             href={"/settings/teams/" + team.id + "/profile"}
diff --git a/packages/features/ee/teams/components/TeamPill.tsx b/packages/features/ee/teams/components/TeamPill.tsx
index 92937fdd16..4e977b03bd 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-emphasis": !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 df1451e9bb..b9bc15de15 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -86,10 +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">
-                {t("pending_invites")}
-              </Label>
+            <div className="bg-subtle mb-6 rounded-md p-5">
+              <Label className=" text-emphasis pb-2 font-semibold">{t("pending_invites")}</Label>
               <TeamList teams={invites} pending />
             </div>
           )}
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..fa47c65f53 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";
 
@@ -32,7 +34,7 @@ export default function TeamAvailabilityScreen(props: Props) {
     if (!member) return <></>;
 
     return (
-      <div key={member.id} style={style} className="flex border-r border-gray-200 pl-4 ">
+      <div key={member.id} style={style} className="flex border-r border-subtle pl-4 ">
         <TeamAvailabilityTimes
           teamId={props.team?.id as number}
           memberId={member.id}
@@ -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="flex w-full space-x-5 border-b border-gray-200 p-4 rtl:space-x-reverse">
+    <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-subtle 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..e46e555ec7 100644
--- a/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/v2/TeamAvailabilityTimes.tsx
@@ -52,16 +52,16 @@ 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>}</>
+        <>{!isLoading && <p className="text-default mb-3 text-sm">{t("time_available")}</p>}</>
       )}
       <div className="max-h-[390px] overflow-scroll">
         {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  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..c5705c4f0f 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -24,7 +24,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
   return (
     <SkeletonContainer>
       <Meta title={title} description={description} />
-      <div className="mt-6 mb-8 space-y-6 divide-y">
+      <div className="mt-6 mb-8 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
@@ -106,7 +106,7 @@ const ProfileView = () => {
           <div className="mb-6 flex items-center text-sm">
             <div>
               <p className="font-semibold">{t("theme")}</p>
-              <p className="text-gray-600">{t("theme_applies_note")}</p>
+              <p className="text-default">{t("theme_applies_note")}</p>
             </div>
           </div>
           <div className="flex flex-col justify-between sm:flex-row">
@@ -133,11 +133,11 @@ const ProfileView = () => {
             />
           </div>
 
-          <hr className="my-8 border-gray-200" />
-          <div className="mb-6 flex items-center text-sm">
+          <hr className="border-subtle my-8" />
+          <div className="text-default mb-6 flex items-center text-sm">
             <div>
               <p className="font-semibold">{t("custom_brand_colors")}</p>
-              <p className="mt-0.5 leading-5 text-gray-600">{t("customize_your_brand_colors")}</p>
+              <p className="mt-0.5 leading-5">{t("customize_your_brand_colors")}</p>
             </div>
           </div>
 
@@ -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 })}
@@ -171,15 +171,15 @@ const ProfileView = () => {
               )}
             />
           </div>
-          <hr className="my-8 border-gray-200" />
+          <hr className="border-subtle my-8" />
 
           <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
@@ -229,8 +229,8 @@ const ProfileView = () => {
           </Button>
         </Form>
       ) : (
-        <div className="rounded-md border border-gray-200 p-5">
-          <span className="text-sm text-gray-600">{t("only_owner_change")}</span>
+        <div className="border-subtle rounded-md border p-5">
+          <span className="text-default text-sm">{t("only_owner_change")}</span>
         </div>
       )}
     </>
diff --git a/packages/features/ee/teams/pages/team-billing-view.tsx b/packages/features/ee/teams/pages/team-billing-view.tsx
index 3ca809a716..590e2b0109 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -15,7 +15,7 @@ const BillingView = () => {
   return (
     <>
       <Meta title={t("team_billing")} description={t("team_billing_description")} />
-      <div className="flex flex-col text-sm sm:flex-row">
+      <div className="text-default flex flex-col text-sm sm:flex-row">
         <div>
           <h2 className="font-medium">{t("billing_manage_details_title")}</h2>
           <p>{t("billing_manage_details_description")}</p>
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index a776f27ff3..4b52f9b223 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -97,13 +97,13 @@ const MembersView = () => {
               </>
             )}
             <div>
-              <ul className="divide-y divide-gray-200 rounded-md border ">
+              <ul className="divide-subtle border-subtle divide-y rounded-md border ">
                 {team?.members.map((member) => {
                   return <MemberListItem key={member.id} team={team} member={member} />;
                 })}
               </ul>
             </div>
-            <hr className="my-8 border-gray-200" />
+            <hr className="border-subtle my-8" />
 
             {team && session.data && (
               <DisableTeamImpersonation
@@ -112,7 +112,7 @@ const MembersView = () => {
                 disabled={isInviteOpen}
               />
             )}
-            <hr className="my-8 border-gray-200" />
+            <hr className="border-subtle my-8" />
           </div>
           {showMemberInvitationModal && team && (
             <MemberInvitationModal
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 8215d46cff..0a26bee6e9 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -181,7 +181,7 @@ const ProfileView = () => {
                 />
               </div>
 
-              <hr className="my-8 border-gray-200" />
+              <hr className="border-subtle my-8" />
 
               <Controller
                 control={form.control}
@@ -226,7 +226,7 @@ const ProfileView = () => {
                   disableLists
                 />
               </div>
-              <p className="mt-2 text-sm text-gray-600">{t("team_description")}</p>
+              <p className="text-default mt-2 text-sm">{t("team_description")}</p>
               <Button color="primary" className="mt-8" type="submit" loading={mutation.isLoading}>
                 {t("update")}
               </Button>
@@ -248,15 +248,15 @@ const ProfileView = () => {
             <div className="flex">
               <div className="flex-grow">
                 <div>
-                  <Label className="text-black">{t("team_name")}</Label>
-                  <p className="text-sm text-gray-800">{team?.name}</p>
+                  <Label className="text-emphasis">{t("team_name")}</Label>
+                  <p className="text-default text-sm">{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"
-                      dangerouslySetInnerHTML={{ __html: team.safeBio || "" }}
+                      className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                      dangerouslySetInnerHTML={{ __html: md.render(team.bio || "") }}
                     />
                   </>
                 )}
@@ -276,9 +276,9 @@ const ProfileView = () => {
               </div>
             </div>
           )}
-          <hr className="my-8 border border-gray-200" />
+          <hr className="border-subtle my-8 border" />
 
-          <div className="mb-3 text-base font-semibold">{t("danger_zone")}</div>
+          <div className="text-default mb-3 text-base font-semibold">{t("danger_zone")}</div>
           {team?.membership.role === "OWNER" ? (
             <Dialog>
               <DialogTrigger asChild>
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..f686b458f6 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -16,15 +16,15 @@ function WorkflowExample(props: WorkflowExampleType) {
   const { Icon, text } = props;
 
   return (
-    <div className="mx-2 my-2 max-h-24 max-w-[600px] rounded-md border border-solid p-6">
+    <div className="border-subtle 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 flex h-[72px] w-[72px] items-center justify-center rounded-full">
+          <FiZap className="dark:text-default inline-block h-10 w-10 stroke-[1.3px]" />
         </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..7fb190f52b 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -98,18 +98,18 @@ 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="flex w-full items-center overflow-hidden rounded-md border border-subtle p-6 px-3 md:p-6">
+      <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-default" : "text-muted"
           )}>
           <span className="mr-1">{t("to")}:</span>
           {Array.from(sendTo).map((sendToPerson, index) => {
@@ -133,7 +133,7 @@ const WorkflowListItem = (props: ItemProps) => {
         <Link href={`/workflows/${workflow.id}`} passHref={true} target="_blank">
           <Button type="button" color="minimal" className="mr-4">
             <div className="hidden ltr:mr-2 rtl:ml-2 sm:block">{t("edit")}</div>
-            <FiExternalLink className="-mt-[2px] h-4 w-4 stroke-2 text-gray-600" />
+            <FiExternalLink className="text-default -mt-[2px] h-4 w-4 stroke-2" />
           </Button>
         </Link>
       </div>
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
index c488403c16..e1a4e0f1aa 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>
@@ -13,7 +13,7 @@ export default SkeletonLoader;
 
 function SkeletonItem() {
   return (
-    <li className="group mb-4 flex h-[90px] w-full items-center justify-between rounded-md border border-gray-200 px-4 py-4 sm:px-6">
+    <li className="group mb-4 flex h-[90px] w-full items-center justify-between rounded-md border border-subtle px-4 py-4 sm:px-6">
       <div className="flex-grow truncate text-sm">
         <div className="flex">
           <SkeletonAvatar className="h-10 w-10" />
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
index 4cba08fe1e..9519cedfeb 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="divide-subtle border-subtle bg-default animate-pulse divide-y  rounded-md border 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..0b074c6c11 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -133,7 +133,7 @@ export default function WorkflowDetailsPage(props: Props) {
               );
             }}
           />
-          <div className="my-7 border-transparent md:border-t md:border-gray-200" />
+          <div className="md:border-subtle my-7 border-transparent md:border-t" />
           <Button
             type="button"
             StartIcon={FiTrash2}
@@ -142,11 +142,11 @@ export default function WorkflowDetailsPage(props: Props) {
             onClick={() => setDeleteDialogOpen(true)}>
             {t("delete_workflow")}
           </Button>
-          <div className="my-7 border-t border-gray-200 md:border-none" />
+          <div className="border-subtle my-7 border-t md:border-none" />
         </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 border-subtle w-full rounded-md border 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..03aac022c7 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -61,18 +61,18 @@ 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">
-          <ul className="divide-y divide-gray-200">
+        <div className="bg-default border-subtle overflow-hidden rounded-md border sm:mx-0">
+          <ul className="divide-subtle divide-y">
             {workflows.map((workflow) => (
               <li key={workflow.id}>
-                <div className="first-line:group flex w-full items-center justify-between p-4 hover:bg-neutral-50 sm:px-6">
+                <div className="first-line:group hover:bg-muted flex w-full items-center justify-between p-4 sm:px-6">
                   <Link href={"/workflows/" + workflow.id} className="flex-grow cursor-pointer">
                     <div className="rtl:space-x-reverse">
                       <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 9ec1c9f21e..a7adf7c367 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -206,17 +206,17 @@ 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 border-subtle w-full rounded-md border 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 text-default 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>
-                <div className="text-base font-bold">{t("trigger")}</div>
-                <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
+                <div className="text-emphasis text-base font-bold">{t("trigger")}</div>
+                <div className="text-default text-sm">{t("when_something_happens")}</div>
               </div>
             </div>
-            <div className="my-7 border-t border-gray-200" />
+            <div className="border-subtle my-7 border-t" />
             <Label>{t("when")}</Label>
             <Controller
               name="trigger"
@@ -281,20 +281,20 @@ 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 border-subtle flex w-full rounded-md border 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 text-default 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>
-                      <div className="text-base font-bold">{t("action")}</div>
-                      <div className="text-sm text-gray-600">{t("action_is_performed")}</div>
+                      <div className="text-emphasis text-base font-bold">{t("action")}</div>
+                      <div className="text-default text-sm">{t("action_is_performed")}</div>
                     </div>
                   </div>
                 </div>
@@ -332,7 +332,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </Dropdown>
                 </div>
               </div>
-              <div className="my-7 border-t border-gray-200" />
+              <div className="border-subtle my-7 border-t" />
               <div>
                 <Label>{t("do_this")}</Label>
                 <Controller
@@ -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
@@ -478,7 +478,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">
@@ -528,7 +528,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")}
@@ -561,7 +561,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">
@@ -644,7 +644,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     )}
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
-                      <div className="mt-2 flex text-sm text-gray-600">
+                      <div className="text-default mt-2 flex text-sm">
                         <FiHelpCircle className="mt-[3px] h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
                       </div>
@@ -755,9 +755,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>
@@ -765,13 +765,13 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div className="mt-6">
                   <p className="test-sm w-full font-medium">{t("example_1")}</p>
                   <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 text-gray-600 ltr:mr-2 rtl:ml-2">
+                    <div className="test-sm text-default col-span-5 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 col-span-5 w-full text-gray-600">{t("variable")}</div>
+                    <div className="test-sm text-emphasis col-span-7">{t("company_size")}</div>
+                    <div className="test-sm text-default col-span-5 w-full">{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, "")
@@ -784,12 +784,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div className="mt-6">
                   <p className="test-sm w-full font-medium">{t("example_2")}</p>
                   <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 text-gray-600 ltr:mr-2 rtl:ml-2">
+                    <div className="test-sm text-default col-span-5 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 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">{t("what_help_needed")}</div>
+                    <div className="test-sm text-default col-span-5">{t("variable")}</div>
+                    <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 63ca6ac9d4..2f4d6c4aca 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -186,7 +186,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 focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
           <Avatar
             imageSrc={userAvatar || ""}
             size="sm"
@@ -197,14 +197,14 @@ const Filter = (props: {
           />
           <label
             htmlFor="yourWorkflows"
-            className="ml-2 mr-auto self-center truncate text-sm font-medium text-gray-700">
+            className="text-default ml-2 mr-auto self-center truncate text-sm font-medium">
             {user}
           </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 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
             checked={!!checked.userId}
             onChange={(e) => {
               if (e.target.checked) {
@@ -222,7 +222,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 focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer"
             key={`${profile.teamId || 0}`}>
             <Avatar
               imageSrc={profile.image || ""}
@@ -234,7 +234,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="text-default ml-2 mr-auto select-none self-center truncate text-sm font-medium hover:cursor-pointer">
               {profile.slug}
             </label>
 
@@ -269,7 +269,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 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded "
             />
           </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..0f4ce14504 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-default text-lg font-semibold">{t("no_event_types")} </h3>
+        <h4 className="dark:text-inverted text-default text-sm leading-normal">
           {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 705588b7e7..d9a3f5dee3 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("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",
+              "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 4acbd2f758..dc8e8e5fb9 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -124,14 +124,12 @@ 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  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">
+              <label htmlFor="guests" className="text-default  mb-1 block text-sm font-medium">
                 {label}
               </label>
               <ul>
@@ -146,7 +144,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={<></>}
@@ -161,7 +159,7 @@ export const Components: Record<BookingFieldType, Component> = {
                                 value.splice(index, 1);
                                 setValue(value);
                               }}>
-                              <FiX className="text-gray-600" />
+                              <FiX className="text-default" />
                             </button>
                           </Tooltip>
                         ) : null
@@ -246,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>
@@ -307,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({
@@ -317,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>
@@ -372,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 2a182ce727..fe1b573b41 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -21,8 +21,8 @@ import {
   InputField,
   Input,
   showToast,
+  Switch,
 } from "@calcom/ui";
-import { Switch } from "@calcom/ui";
 import { FiArrowDown, FiArrowUp, FiX, FiPlus, FiTrash2, FiInfo } from "@calcom/ui/components/icon";
 
 import { Components } from "./Components";
@@ -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,9 +260,9 @@ 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>
-        <ul className="mt-2 rounded-md border">
+        <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="border-default divide-subtle mt-2 divide-y-2 rounded-md border ">
           {fields.map((field, index) => {
             const fieldType = FieldTypesMap[field.type];
 
@@ -286,11 +286,11 @@ export const FormBuilder = function FormBuilder({
               <li
                 key={field.name}
                 data-testid={`field-${field.name}`}
-                className="group relative flex items-center justify-between border-b p-4 last:border-b-0">
+                className="group relative flex items-center justify-between  p-4">
                 {index >= 1 && (
                   <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 hover:text-emphasis disabled:hover:text-muted border-default hover:border-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: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>
@@ -298,14 +298,14 @@ export const FormBuilder = function FormBuilder({
                 {index < fields.length - 1 && (
                   <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 hover:border-emphasis border-default hover:text-emphasis disabled:hover:text-muted 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: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">
@@ -323,7 +323,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>
@@ -347,7 +347,7 @@ export const FormBuilder = function FormBuilder({
                       Edit
                     </Button>
                     <Button
-                      color="minimal"
+                      color="secondary"
                       tooltip={
                         field.editable === "system" || field.editable === "system-but-optional"
                           ? t("form_builder_system_field_cant_delete")
@@ -521,7 +521,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 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/insights/components/AverageEventDurationChart.tsx b/packages/features/insights/components/AverageEventDurationChart.tsx
index f7caaf0f43..1c38ff0707 100644
--- a/packages/features/insights/components/AverageEventDurationChart.tsx
+++ b/packages/features/insights/components/AverageEventDurationChart.tsx
@@ -1,4 +1,4 @@
-import { LineChart, Title } from "@tremor/react";
+import { Title } from "@tremor/react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
@@ -6,6 +6,7 @@ import { trpc } from "@calcom/trpc";
 import { useFilterContext } from "../context/provider";
 import { valueFormatter } from "../lib/valueFormatter";
 import { CardInsights } from "./Card";
+import { LineChart } from "./LineChart";
 import { LoadingInsight } from "./LoadingInsights";
 
 export const AverageEventDurationChart = () => {
@@ -29,9 +30,9 @@ export const AverageEventDurationChart = () => {
   const isNoData = (data && data.length === 0) || data.every((item) => item["Average"] === 0);
   return (
     <CardInsights>
-      <Title>{t("average_event_duration")}</Title>
+      <Title className="text-emphasis">{t("average_event_duration")}</Title>
       {isNoData && (
-        <div className="flex h-60 text-center">
+        <div className="text-default flex h-60 text-center">
           <p className="m-auto text-sm font-light">{t("insights_no_data_found_for_filter")}</p>
         </div>
       )}
diff --git a/packages/features/insights/components/BookingStatusLineChart.tsx b/packages/features/insights/components/BookingStatusLineChart.tsx
index 009b943e3b..00ed4fd0d3 100644
--- a/packages/features/insights/components/BookingStatusLineChart.tsx
+++ b/packages/features/insights/components/BookingStatusLineChart.tsx
@@ -1,4 +1,4 @@
-import { LineChart, Title } from "@tremor/react";
+import { Title } from "@tremor/react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
@@ -6,6 +6,7 @@ import { trpc } from "@calcom/trpc";
 import { useFilterContext } from "../context/provider";
 import { valueFormatter } from "../lib/valueFormatter";
 import { CardInsights } from "./Card";
+import { LineChart } from "./LineChart";
 import { LoadingInsight } from "./LoadingInsights";
 
 export const BookingStatusLineChart = () => {
@@ -41,13 +42,13 @@ export const BookingStatusLineChart = () => {
 
   return (
     <CardInsights>
-      <Title>{t("event_trends")}</Title>
+      <Title className="text-emphasis">{t("event_trends")}</Title>
       <LineChart
-        className="mt-4 h-80"
+        className="linechart mt-4 h-80"
         data={eventsTimeLine ?? []}
         categories={["Created", "Completed", "Rescheduled", "Cancelled"]}
         index="Month"
-        colors={["gray", "green", "blue", "red"]}
+        colors={["purple", "green", "blue", "red"]}
         valueFormatter={valueFormatter}
       />
     </CardInsights>
diff --git a/packages/features/insights/components/Card.tsx b/packages/features/insights/components/Card.tsx
index 6410f1ad3d..b27cba0422 100644
--- a/packages/features/insights/components/Card.tsx
+++ b/packages/features/insights/components/Card.tsx
@@ -11,7 +11,7 @@ export const CardInsights = (props: ICardProps) => {
   const { children, className = "", ...rest } = props;
 
   return (
-    <Card className={classNames("shadow-none ring-gray-200", className)} {...rest}>
+    <Card className={classNames(`ring-subtle bg-muted shadow-none `, className)} {...rest}>
       {children}
     </Card>
   );
diff --git a/packages/features/insights/components/KPICard.tsx b/packages/features/insights/components/KPICard.tsx
index e69f77f312..748f501f38 100644
--- a/packages/features/insights/components/KPICard.tsx
+++ b/packages/features/insights/components/KPICard.tsx
@@ -22,9 +22,9 @@ export const KPICard = ({
   const { t } = useLocale();
   return (
     <CardInsights key={title}>
-      <Text>{title}</Text>
+      <Text className="text-default">{title}</Text>
       <Flex className="items-baseline justify-start space-x-3 truncate">
-        <Metric>{valueFormatter(previousMetricData.count)}</Metric>
+        <Metric className="text-emphasis">{valueFormatter(previousMetricData.count)}</Metric>
       </Flex>
       <Flex className="mt-4 justify-start space-x-2">
         <BadgeDelta
@@ -41,7 +41,7 @@ export const KPICard = ({
               startDate: previousDateRange.startDate,
               endDate: previousDateRange.endDate,
             })}>
-            <small className="relative top-px cursor-pointer text-xs text-gray-600">
+            <small className="text-default relative top-px cursor-pointer text-xs">
               {t("from_last_period")}
             </small>
           </Tooltip>
diff --git a/packages/features/insights/components/LeastBookedTeamMembersTable.tsx b/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
index 20a5b5e63f..8285088ee3 100644
--- a/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
+++ b/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
@@ -27,7 +27,7 @@ export const LeastBookedTeamMembersTable = () => {
 
   return (
     <CardInsights>
-      <Title>{t("least_booked_members")}</Title>
+      <Title className="text-emphasis">{t("least_booked_members")}</Title>
       <TotalBookingUsersTable data={data} />
     </CardInsights>
   );
diff --git a/packages/features/insights/components/LineChart.tsx b/packages/features/insights/components/LineChart.tsx
new file mode 100644
index 0000000000..0c338f44bc
--- /dev/null
+++ b/packages/features/insights/components/LineChart.tsx
@@ -0,0 +1,12 @@
+import { LineChart as ExternalLineChart } from "@tremor/react";
+
+import type { LineChartProps } from "./tremor.types";
+
+// Honestly this is a mess. Why are all chart libraries in existance horrible to theme
+export const LineChart = (props: LineChartProps) => {
+  return (
+    <div className="dark:invert">
+      <ExternalLineChart {...props} />
+    </div>
+  );
+};
diff --git a/packages/features/insights/components/MostBookedTeamMembersTable.tsx b/packages/features/insights/components/MostBookedTeamMembersTable.tsx
index 1dc4a8c1c7..b83f714d44 100644
--- a/packages/features/insights/components/MostBookedTeamMembersTable.tsx
+++ b/packages/features/insights/components/MostBookedTeamMembersTable.tsx
@@ -28,7 +28,7 @@ export const MostBookedTeamMembersTable = () => {
 
   return (
     <CardInsights className="shadow-none">
-      <Title>{t("most_booked_members")}</Title>
+      <Title className="text-emphasis">{t("most_booked_members")}</Title>
       <TotalBookingUsersTable data={data} />
     </CardInsights>
   );
diff --git a/packages/features/insights/components/PopularEventsTable.tsx b/packages/features/insights/components/PopularEventsTable.tsx
index 66c61251b8..dfc2109fa5 100644
--- a/packages/features/insights/components/PopularEventsTable.tsx
+++ b/packages/features/insights/components/PopularEventsTable.tsx
@@ -28,14 +28,14 @@ export const PopularEventsTable = () => {
 
   return (
     <CardInsights>
-      <Title>{t("popular_events")}</Title>
+      <Title className="text-emphasis">{t("popular_events")}</Title>
       <Table className="mt-5">
         <TableBody>
           {data.map((item) => (
             <TableRow key={item.eventTypeId}>
-              <TableCell>{item.eventTypeName}</TableCell>
-              <TableCell className="text-right">
-                <Text>
+              <TableCell className="text-default">{item.eventTypeName}</TableCell>
+              <TableCell>
+                <Text className="text-default text-right">
                   <strong>{item.count}</strong>
                 </Text>
               </TableCell>
diff --git a/packages/features/insights/components/TotalBookingUsersTable.tsx b/packages/features/insights/components/TotalBookingUsersTable.tsx
index f368ed27b9..655f1790bf 100644
--- a/packages/features/insights/components/TotalBookingUsersTable.tsx
+++ b/packages/features/insights/components/TotalBookingUsersTable.tsx
@@ -26,13 +26,13 @@ export const TotalBookingUsersTable = ({
                     className="m-2"
                     gravatarFallbackMd5={item.emailMd5}
                   />
-                  <p className="my-auto mx-0">
+                  <p className="text-default my-auto mx-0">
                     <strong>{item.user.name}</strong>
                   </p>
                 </TableCell>
                 <TableCell className="text-right">
                   <Text>
-                    <strong>{item.count}</strong>
+                    <strong className="text-default">{item.count}</strong>
                   </Text>
                 </TableCell>
               </TableRow>
diff --git a/packages/features/insights/components/tremor.types.ts b/packages/features/insights/components/tremor.types.ts
new file mode 100644
index 0000000000..fc6710923d
--- /dev/null
+++ b/packages/features/insights/components/tremor.types.ts
@@ -0,0 +1,49 @@
+type ValueFormatter = {
+  (value: number): string;
+};
+
+type Color =
+  | "slate"
+  | "gray"
+  | "zinc"
+  | "neutral"
+  | "stone"
+  | "red"
+  | "orange"
+  | "amber"
+  | "yellow"
+  | "lime"
+  | "green"
+  | "emerald"
+  | "teal"
+  | "cyan"
+  | "sky"
+  | "blue"
+  | "indigo"
+  | "violet"
+  | "purple"
+  | "fuchsia"
+  | "pink"
+  | "rose";
+
+interface BaseChartProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: any[];
+  categories: string[];
+  index: string;
+  colors?: Color[];
+  valueFormatter?: ValueFormatter;
+  startEndOnly?: boolean;
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  yAxisWidth?: number;
+  showAnimation?: boolean;
+  showTooltip?: boolean;
+  showGradient?: boolean;
+  showLegend?: boolean;
+  showGridLines?: boolean;
+  autoMinValue?: boolean;
+  minValue?: number;
+  maxValue?: number;
+}
+
+export type LineChartProps = BaseChartProps & React.RefAttributes<HTMLDivElement>;
diff --git a/packages/features/insights/filters/DateSelect.css b/packages/features/insights/filters/DateSelect.css
index b70bf5a31e..cc70b13b45 100644
--- a/packages/features/insights/filters/DateSelect.css
+++ b/packages/features/insights/filters/DateSelect.css
@@ -4,9 +4,16 @@
 }
 
 .tremor-DateRangePicker-calendarButton, .tremor-DateRangePicker-dropdownButton {
-  @apply dark:bg-darkgray-100 dark:border-darkgray-300 border-gray-300 bg-white text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0 focus-within:ring-gray-800 hover:border-gray-400 dark:focus-within:ring-darkgray-900
+  @apply  border-subtle bg-default text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-0 focus-within:ring-emphasis hover:border-subtle dark:focus-within:ring-emphasis hover:bg-subtle
 }
 
+.tremor-DateRangePicker-calendarButtonText,.tremor-DateRangePicker-dropdownButtonText {
+  @apply text-default
+}
+
+.tremor-DateRangePicker-calendarModal,.tremor-DateRangePicker-dropdownModal{
+  @apply dark:invert
+}
 
 .tremor-Card-root{
   @apply p-5
@@ -20,9 +27,13 @@
   @apply -mx-4
 }
 .tremor-Card-root > p {
-  @apply text-base font-semibold text-black mb-2
+  @apply text-base font-semibold mb-2
 }
 
 .tremor-Legend-legendItem{
   @apply ml-2
+}
+
+.tremor-TableBody-root{
+  @apply divide-subtle
 }
\ No newline at end of file
diff --git a/packages/features/insights/filters/FilterType.tsx b/packages/features/insights/filters/FilterType.tsx
index 6c983daace..6cb966f1c1 100644
--- a/packages/features/insights/filters/FilterType.tsx
+++ b/packages/features/insights/filters/FilterType.tsx
@@ -44,8 +44,8 @@ export const FilterType = () => {
       }}
       className="w-32 min-w-[130px]"
       placeholder={
-        <div className="flex flex-row text-gray-900">
-          <FiFilter className="m-auto text-gray-900" />
+        <div className="text-emphasis flex flex-row">
+          <FiFilter className="m-auto" />
           {t("add_filter")}
         </div>
       }
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index 4e1e6a1132..758a574b5b 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -240,16 +240,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">
-          <div className="flex items-center justify-center border-b">
-            <FiSearch className="mx-3 h-4 w-4 text-gray-500" />
+        <KBarAnimator className="bg-default z-10 w-full max-w-screen-sm overflow-hidden rounded-md shadow-lg">
+          <div className="border-subtle flex items-center justify-center border-b">
+            <FiSearch className="text-default mx-3 h-4 w-4" />
             <KBarSearch
               defaultPlaceholder={t("kbar_search_placeholder")}
-              className="w-full rounded-sm py-2.5 focus-visible:outline-none"
+              className="bg-default placeholder:text-subtle text-default 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 border-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" />
@@ -259,7 +259,7 @@ export const KBarContent = () => {
             <span className="pr-2">{t("close")}</span>
           </div>
         </KBarAnimator>
-        <div className="z-1 fixed inset-0 bg-gray-600 bg-opacity-75" />
+        <div className="z-1 fixed inset-0 bg-neutral-800 bg-opacity-70" />
       </KBarPositioner>
     </KBarPortal>
   );
@@ -273,7 +273,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="text-default 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>
@@ -288,7 +288,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>
         );
@@ -306,13 +308,14 @@ 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-emphasis p-4 text-xs font-bold uppercase">{t(item)}</div>
         ) : (
           <div
             // For seeing keyboard up & down navigation in action, we need visual feedback based on "active" prop
             style={{
-              background: active ? "rgb(245,245,245)" : "#fff",
-              borderLeft: active ? "2px solid black" : "2px solid transparent",
+              background: active ? "var(--cal-bg-subtle)" : `var(--cal-bg-default)`,
+              borderLeft: active ? "2px solid var(--cal-border-default)" : "2px solid transparent",
+              color: "var(--cal-text)",
             }}
             className="flex items-center justify-between px-4 py-2.5 text-sm hover:cursor-pointer">
             <span>{t(item.name)}</span>
diff --git a/packages/features/schedules/components/DateOverrideInputDialog.tsx b/packages/features/schedules/components/DateOverrideInputDialog.tsx
index cf7195343b..44223450b7 100644
--- a/packages/features/schedules/components/DateOverrideInputDialog.tsx
+++ b/packages/features/schedules/components/DateOverrideInputDialog.tsx
@@ -117,7 +117,7 @@ const DateOverrideForm = ({
         onClose();
       }}
       className="p-6 sm:flex sm:p-0">
-      <div className={classNames(date && "w-full sm:border-r sm:pr-6", "sm:p-4 md:p-8")}>
+      <div className={classNames(date && "sm:border-subtle w-full sm:border-r sm:pr-6", "sm:p-4 md:p-8")}>
         <DialogHeader title={t("date_overrides_dialog_title")} />
         <DatePicker
           includedDates={includedDates}
@@ -135,10 +135,10 @@ const DateOverrideForm = ({
       {date && (
         <div className="relative mt-8 flex w-full flex-col sm:mt-0 sm:p-4 md:p-8">
           <div className="mb-4 flex-grow space-y-4">
-            <p className="text-medium text-sm">{t("date_overrides_dialog_which_hours")}</p>
+            <p className="text-medium text-emphasis 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..f033b822be 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -53,11 +53,11 @@ const DateOverrideList = ({
   };
 
   return (
-    <ul className="rounded border border-gray-200" data-testid="date-overrides-list">
+    <ul className="rounded border border-subtle" data-testid="date-overrides-list">
       {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 af6be32a30..d4d1ce9e6a 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -52,11 +52,11 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
   const watchDayRange = watch(name);
 
   return (
-    <div className="mb-4 flex w-full flex-col last:mb-0 sm:flex-row sm:px-0">
+    <div className="flex mb-4 w-full flex-col last:mb-0 sm:flex-row sm:px-0">
       {/* Label & switch container */}
       <div className="flex h-[36px] items-center justify-between sm:w-32">
         <div>
-          <label className="flex flex-row items-center space-x-2 rtl:space-x-reverse">
+          <label className="text-default flex flex-row items-center space-x-2 rtl:space-x-reverse">
             <div>
               <Switch
                 disabled={!watchDayRange}
@@ -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")}
@@ -179,12 +179,12 @@ export const DayRanges = <TFieldValues extends FieldValues>({
     <div>
       {fields.map((field, index: number) => (
         <Fragment key={field.id}>
-          <div className="mb-2 flex last:mb-0">
+          <div className="flex mb-2 last:mb-0">
             <Controller name={`${name}.${index}`} render={({ field }) => <TimeRangeField {...field} />} />
             {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>
       ))}
@@ -237,7 +237,7 @@ const TimeRangeField = ({ className, value, onChange }: { className?: string } &
           onChange({ ...value, start: new Date(option?.value as number) });
         }}
       />
-      <span className="mx-2 w-2 self-center"> - </span>
+      <span className="text-default mx-2 w-2 self-center"> - </span>
       <LazySelect
         className="inline-block w-[100px] rounded-md"
         value={value.end}
@@ -380,13 +380,13 @@ 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-emphasis 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;
             return (
               <li key={weekday}>
-                <label className="flex w-full items-center justify-between">
+                <label className="text-default flex w-full items-center justify-between">
                   <span className="px-1">{weekday}</span>
                   <input
                     value={weekdayIndex}
@@ -400,7 +400,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 bg-default text-emphasis disabled:text-muted focus:ring-emphasis dark:checked:bg-muted focus:bg-default dark:checked:focus:bg-default dark:checked:hover:bg-subtle dark:checked:hover:text-inverted inline-block rounded-[4px]"
                   />
                 </label>
               </li>
@@ -408,7 +408,7 @@ const CopyTimes = ({
           })}
         </ol>
       </div>
-      <hr />
+      <hr className="border-subtle" />
       <div className="space-x-2 px-2 rtl:space-x-reverse">
         <Button color="minimal" onClick={() => onCancel()}>
           {t("cancel")}
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index dff3602541..3f323e4f2f 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -39,21 +39,21 @@ export function ScheduleListItem({
 
   return (
     <li key={schedule.id}>
-      <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
-        <div className="group flex w-full items-center justify-between hover:bg-neutral-50 sm:px-6">
+      <div className="hover:bg-muted flex items-center justify-between py-5 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
+        <div className="group flex w-full items-center justify-between sm:px-6">
           <Link
             href={"/availability/" + schedule.id}
             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) => (
@@ -87,7 +87,7 @@ export function ScheduleListItem({
           </DropdownMenuTrigger>
           {!isLoading && data && (
             <DropdownMenuContent>
-              <DropdownMenuItem className="min-w-40 focus:ring-gray-100">
+              <DropdownMenuItem className="min-w-40 focus:ring-muted">
                 {!schedule.isDefault && (
                   <DropdownItem
                     type="button"
@@ -102,7 +102,7 @@ export function ScheduleListItem({
                   </DropdownItem>
                 )}
               </DropdownMenuItem>
-              <DropdownMenuItem className="min-w-40 focus:ring-gray-100">
+              <DropdownMenuItem className="min-w-40 focus:ring-muted">
                 <DropdownItem
                   type="button"
                   color="destructive"
diff --git a/packages/features/settings/ThemeLabel.tsx b/packages/features/settings/ThemeLabel.tsx
index 6329845869..32fe8aebdf 100644
--- a/packages/features/settings/ThemeLabel.tsx
+++ b/packages/features/settings/ThemeLabel.tsx
@@ -21,7 +21,7 @@ export default function ThemeLabel(props: ThemeLabelProps) {
         defaultChecked={defaultChecked}
         {...register("theme")}
       />
-      <div className="relative z-10 rounded-lg ring-black transition-all peer-checked:ring-2">
+      <div className="ring-inverted relative z-10 rounded-lg ring-offset-2 transition-all peer-checked:ring-2">
         <img
           aria-hidden="true"
           className="cover w-full rounded-lg"
@@ -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 text-default mt-2 text-sm font-medium">{label}</p>
     </label>
   );
 }
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 45dff5b432..2954cf7703 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -127,7 +127,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">
@@ -173,7 +173,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"
@@ -186,7 +186,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 text-default group flex h-9 w-64 flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
                   {tab && tab.icon && (
                     <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                   )}
@@ -200,14 +200,14 @@ const SettingsSidebarContainer = ({
                   <p className="text-sm font-medium leading-5">{t(tab.name)}</p>
                 </div>
               </div>
-              <div className="my-3">
+              <div className="my-3 space-y-0.5">
                 {tab.children?.map((child, index) => (
                   <VerticalTabItem
                     key={child.href}
                     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
                   />
@@ -218,7 +218,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 text-default group flex h-9 w-64 flex-row items-center rounded-md px-2 py-[10px]  text-sm font-medium leading-none">
                     {tab && tab.icon && (
                       <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
                     )}
@@ -244,7 +244,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 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,
@@ -270,19 +270,19 @@ const SettingsSidebarContainer = ({
                               )}
                             </div>
                           </CollapsibleTrigger>
-                          <CollapsibleContent>
+                          <CollapsibleContent className="space-y-0.5">
                             {team.accepted && (
                               <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) && (
@@ -291,26 +291,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
                                   />
                                 )}
@@ -323,7 +323,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
                 />
@@ -342,17 +342,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>
@@ -428,7 +428,7 @@ function ShellHeader() {
   const { t, isLocaleReady } = useLocale();
   return (
     <header className="mx-auto block justify-between pt-8 sm:flex">
-      <div className="mb-8 flex w-full items-center border-b border-gray-200 pb-6">
+      <div className="border-subtle mb-8 flex w-full items-center border-b pb-6">
         {meta.backButton && (
           <a href="javascript:history.back()">
             <FiArrowLeft className="mr-7" />
@@ -436,16 +436,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>
+            <p className="text-default text-sm 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="flex-shrink-0 ltr:ml-auto rtl:mr-auto">{meta.CTA}</div>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index f58f089452..3211e81c0c 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -18,9 +18,9 @@ import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { KBarContent, KBarRoot, KBarTrigger } from "@calcom/features/kbar/Kbar";
 import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog";
 import AdminPasswordBanner from "@calcom/features/users/components/AdminPasswordBanner";
-import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { APP_NAME, DESKTOP_APP_LINK, JOIN_SLACK, ROADMAP, WEBAPP_URL } from "@calcom/lib/constants";
+import getBrandColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
@@ -42,6 +42,7 @@ import {
   Logo,
   SkeletonText,
   showToast,
+  useCalcomTheme,
 } from "@calcom/ui";
 import {
   FiArrowLeft,
@@ -198,9 +199,13 @@ type LayoutProps = {
   smallHeading?: boolean;
 };
 
-const CustomBrandingContainer = () => {
+const useBrandColors = () => {
   const { data: user } = useMeQuery();
-  return <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />;
+  const brandTheme = getBrandColours({
+    lightVal: user?.brandColor,
+    darkVal: user?.darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
 };
 
 const KBarWrapper = ({ children, withKBar = false }: { withKBar: boolean; children: React.ReactNode }) =>
@@ -217,7 +222,6 @@ const PublicShell = (props: LayoutProps) => {
   const { status } = useSession();
   return (
     <KBarWrapper withKBar={status === "authenticated"}>
-      <CustomBrandingContainer />
       <Layout {...props} />
     </KBarWrapper>
   );
@@ -227,11 +231,11 @@ export default function Shell(props: LayoutProps) {
   // if a page is unauthed and isPublic is true, the redirect does not happen.
   useRedirectToLoginIfUnauthenticated(props.isPublic);
   useRedirectToOnboardingIfNeeded();
-  useTheme("light");
+  useTheme();
+  useBrandColors();
 
   return !props.isPublic ? (
     <KBarWrapper withKBar>
-      <CustomBrandingContainer />
       <Layout {...props} />
     </KBarWrapper>
   ) : (
@@ -279,7 +283,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",
@@ -303,10 +307,10 @@ 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">
+                  <span className="text-default block truncate font-normal leading-none">
                     {user.username
                       ? process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com"
                         ? `cal.com/${user.username}`
@@ -315,7 +319,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>
@@ -331,7 +335,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               setMenuOpen(false);
               setHelpOpen(false);
             }}
-            className="overflow-hidden rounded-md">
+            className="group overflow-hidden rounded-md">
             {helpOpen ? (
               <HelpMenuItem onHelpItemSelect={() => onHelpItemSelect()} />
             ) : (
@@ -340,15 +344,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                   <DropdownItem
                     type="button"
                     StartIcon={(props) => (
-                      <FiMoon
-                        className={classNames(
-                          user.away
-                            ? "text-purple-500 group-hover:text-purple-700"
-                            : "text-gray-500 group-hover:text-gray-700",
-                          props.className
-                        )}
-                        aria-hidden="true"
-                      />
+                      <FiMoon className={classNames("text-default", props.className)} aria-hidden="true" />
                     )}
                     onClick={() => {
                       mutation.mutate({ away: !user?.away });
@@ -575,7 +571,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>
@@ -620,17 +616,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 text-default group flex items-center rounded-md py-2 px-3 text-sm font-medium",
           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-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-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}
           />
@@ -664,7 +660,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 border-subtle fixed bottom-0 z-30 -mx-4 flex w-full border border-t bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
           isEmbed && "hidden"
         )}>
         {mobileNavigationBottomItems.map((item) => (
@@ -693,12 +689,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}
         />
@@ -720,12 +716,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>
   );
@@ -746,7 +742,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-muted border-muted top-0 hidden h-full max-h-screen w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky 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">
@@ -756,20 +752,20 @@ 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>
           </header>
 
-          <hr className="desktop-only absolute -left-3 -right-3 mt-4 block w-full border-gray-200" />
+          <hr className="desktop-only border-subtle absolute -left-3 -right-3 mt-4 block w-full" />
 
           {/* logo icon for tablet */}
           <Link href="/event-types" className="text-center md:inline lg:hidden">
@@ -827,14 +823,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-default hidden text-sm md:block">
                   {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
                 </p>
               )}
@@ -867,7 +863,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">
@@ -894,18 +890,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-muted border-subtle sticky top-0 z-40 flex w-full items-center justify-between border-b bg-opacity-50 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-muted hover: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-muted hover: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 22cfc1e9a8..8c72b68a91 100644
--- a/packages/features/tips/UpgradeTip.tsx
+++ b/packages/features/tips/UpgradeTip.tsx
@@ -49,8 +49,8 @@ export function UpgradeTip({
           quality={100}
         />
         <div className="relative mt-4 px-8 sm:px-14">
-          <h1 className={classNames("font-cal text-3xl", dark && "text-white")}>{t(title)}</h1>
-          <p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-white" : "text-gray-700")}>
+          <h1 className={classNames("font-cal text-3xl", dark && "text-inverted")}>{t(title)}</h1>
+          <p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-inverted" : "text-default")}>
             {t(description)}
           </p>
           {buttons}
@@ -59,10 +59,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>
+            <h2 className="font-cal text-emphasis mt-4 text-lg">{feature.title}</h2>
+            <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 3440865bb6..67ce7f3fcb 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -59,7 +59,7 @@ export default function WebhookListItem(props: {
   return (
     <div className={classNames("flex w-full justify-between p-4", props.lastItem ? "" : "border-b")}>
       <div className="w-full truncate">
-        <p className="truncate text-sm font-medium text-gray-900">{webhook.subscriberUrl}</p>
+        <p className="text-emphasis truncate text-sm font-medium">{webhook.subscriberUrl}</p>
         <Tooltip content={t("triggers_when")}>
           <div className="flex w-4/5 flex-wrap">
             {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/WebhookListSkeleton.tsx b/packages/features/webhooks/components/WebhookListSkeleton.tsx
index 9d2be41cc2..024ecc120b 100644
--- a/packages/features/webhooks/components/WebhookListSkeleton.tsx
+++ b/packages/features/webhooks/components/WebhookListSkeleton.tsx
@@ -5,7 +5,7 @@ import WebhookListItemSkeleton from "./WebhookListItemSkeleton";
 export default function WebhookListSkeleton() {
   return (
     <SkeletonContainer>
-      <div className="mt-6 mb-8 divide-y rounded-md border">
+      <div className="border-subtle divide-subtle mt-6 mb-8 divide-y rounded-md border">
         <WebhookListItemSkeleton />
         <WebhookListItemSkeleton />
         <WebhookListItemSkeleton />
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index 62bbbe3e33..9ed0094e86 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -19,8 +19,8 @@ export default function WebhookTestDisclosure() {
     <>
       <div className="flex justify-between">
         <div>
-          <p className="text-sm font-semibold leading-5">{t("webhook_test")}</p>
-          <p className="mb-4 text-sm text-gray-600">{t("test_webhook")}</p>
+          <p className="text-emphasis text-sm font-semibold leading-5">{t("webhook_test")}</p>
+          <p className="text-default mb-4 text-sm">{t("test_webhook")}</p>
         </div>
         <Button
           type="button"
@@ -31,10 +31,12 @@ export default function WebhookTestDisclosure() {
           {t("ping_test")}
         </Button>
       </div>
-      <div className="space-y-0 rounded-md border border-neutral-200 sm:mx-0">
+      <div className="border-subtle space-y-0 rounded-md border sm:mx-0">
         <div className="flex justify-between border-b p-4">
           <div className="flex items-center space-x-1">
-            <h3 className="self-center text-sm font-semibold leading-4">{t("webhook_response")}</h3>
+            <h3 className="text-emphasis self-center text-sm font-semibold leading-4">
+              {t("webhook_response")}
+            </h3>
             {mutation.data && (
               <Badge variant={mutation.data.ok ? "green" : "red"}>
                 {mutation.data.ok ? t("passed") : t("failed")}
@@ -42,10 +44,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 bg-inverted rounded-b-md 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/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx
index d94afa64d4..1a0e2cc734 100644
--- a/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -6,7 +6,8 @@ import { trpc } from "@calcom/trpc/react";
 import { Meta, showToast, SkeletonContainer } from "@calcom/ui";
 
 import { getLayout } from "../../settings/layouts/SettingsLayout";
-import WebhookForm, { WebhookFormSubmitData } from "../components/WebhookForm";
+import type { WebhookFormSubmitData } from "../components/WebhookForm";
+import WebhookForm from "../components/WebhookForm";
 
 const NewWebhookView = () => {
   const { t } = useLocale();
diff --git a/packages/lib/CustomBranding.test.tsx b/packages/lib/CustomBranding.test.tsx
deleted file mode 100644
index 5affe88bb1..0000000000
--- a/packages/lib/CustomBranding.test.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { colorNameToHex, fallBackHex, isValidHexCode } from "./CustomBranding";
-
-describe("Custom Branding tests", () => {
-  describe("fn: colorNameToHex", () => {
-    it("should return a hex color when a valid color name is provided", () => {
-      const cases = [
-        {
-          input: "red",
-          expected: "#ff0000",
-        },
-        {
-          input: "green",
-          expected: "#008000",
-        },
-        {
-          input: "salmon",
-          expected: "#fa8072",
-        },
-        {
-          input: "rebeccapurple",
-          expected: "#663399",
-        },
-      ];
-
-      for (const { input, expected } of cases) {
-        const result = colorNameToHex(input);
-
-        expect(result).toEqual(expected);
-      }
-    });
-
-    it("should return false when an invalid color name is provided", () => {
-      const result = colorNameToHex("invalid");
-
-      expect(result).toEqual(false);
-    });
-  });
-
-  describe("fn: isValidHexCode", () => {
-    it("should return true when a valid hex code is provided", () => {
-      const cases = [
-        {
-          input: "#ff0000",
-          expected: true,
-        },
-        {
-          input: "#00Ff00",
-          expected: true,
-        },
-        {
-          input: "#fA8072",
-          expected: true,
-        },
-        {
-          input: "#663",
-          expected: true,
-        },
-        {
-          input: "#fAb",
-          expected: true,
-        },
-        {
-          input: "#F00F00",
-          expected: true,
-        },
-      ];
-
-      for (const { input, expected } of cases) {
-        const result = isValidHexCode(input);
-
-        if (!result) {
-          console.log("input", input);
-        }
-
-        expect(result).toEqual(expected);
-      }
-    });
-
-    it("should return false when an invalid hex code is provided", () => {
-      const cases = [
-        {
-          input: "#ff000",
-          expected: false,
-        },
-        {
-          input: "#F000G0",
-          expected: false,
-        },
-        {
-          input: "#00ff00a",
-          expected: false,
-        },
-        {
-          input: "#fa8072aa",
-          expected: false,
-        },
-        {
-          input: "#663399aa",
-          expected: false,
-        },
-      ];
-
-      for (const { input, expected } of cases) {
-        const result = isValidHexCode(input);
-
-        expect(result).toEqual(expected);
-      }
-    });
-  });
-
-  describe("fn: fallBackHex", () => {
-    it("should return a hex color when a valid color name is provided", () => {
-      const cases = [
-        {
-          input: "red",
-          expected: "#ff0000",
-        },
-        {
-          input: "green",
-          expected: "#008000",
-        },
-        {
-          input: "salmon",
-          expected: "#fa8072",
-        },
-        {
-          input: "rebeccapurple",
-          expected: "#663399",
-        },
-      ];
-
-      for (const { input, expected } of cases) {
-        const result = colorNameToHex(input);
-
-        expect(result).toEqual(expected);
-      }
-    });
-
-    it("should return a brand color when there is no hex fallback", () => {
-      // BRAND_COLOR => "#292929"
-      // BRAND_TEXT_COLOR => "#ffffff"
-      // DARK_BRAND_COLOR => "#fafafa"
-
-      const inputs = ["reddit", null, "darkbruwn"];
-
-      for (const input of inputs) {
-        const resultLight = fallBackHex(input, false);
-        const resultDark = fallBackHex(input, true);
-
-        expect(resultLight).toEqual("#292929");
-        expect(resultDark).toEqual("#fafafa");
-      }
-    });
-  });
-});
diff --git a/packages/lib/CustomBranding.tsx b/packages/lib/CustomBranding.tsx
deleted file mode 100644
index 4bf695a8bd..0000000000
--- a/packages/lib/CustomBranding.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import Head from "next/head";
-
-import { useBrandColors } from "@calcom/embed-core/embed-iframe";
-
-const BRAND_COLOR = "#292929";
-const BRAND_TEXT_COLOR = "#ffffff";
-const DARK_BRAND_COLOR = "#fafafa";
-
-const HTML_COLORS = {
-  aliceblue: "#f0f8ff",
-  antiquewhite: "#faebd7",
-  aqua: "#00ffff",
-  aquamarine: "#7fffd4",
-  azure: "#f0ffff",
-  beige: "#f5f5dc",
-  bisque: "#ffe4c4",
-  black: "#000000",
-  blanchedalmond: "#ffebcd",
-  blue: "#0000ff",
-  blueviolet: "#8a2be2",
-  brown: "#a52a2a",
-  burlywood: "#deb887",
-  cadetblue: "#5f9ea0",
-  chartreuse: "#7fff00",
-  chocolate: "#d2691e",
-  coral: "#ff7f50",
-  cornflowerblue: "#6495ed",
-  cornsilk: "#fff8dc",
-  crimson: "#dc143c",
-  cyan: "#00ffff",
-  darkblue: "#00008b",
-  darkcyan: "#008b8b",
-  darkgoldenrod: "#b8860b",
-  darkgray: "#a9a9a9",
-  darkgreen: "#006400",
-  darkkhaki: "#bdb76b",
-  darkmagenta: "#8b008b",
-  darkolivegreen: "#556b2f",
-  darkorange: "#ff8c00",
-  darkorchid: "#9932cc",
-  darkred: "#8b0000",
-  darksalmon: "#e9967a",
-  darkseagreen: "#8fbc8f",
-  darkslateblue: "#483d8b",
-  darkslategray: "#2f4f4f",
-  darkturquoise: "#00ced1",
-  darkviolet: "#9400d3",
-  deeppink: "#ff1493",
-  deepskyblue: "#00bfff",
-  dimgray: "#696969",
-  dodgerblue: "#1e90ff",
-  firebrick: "#b22222",
-  floralwhite: "#fffaf0",
-  forestgreen: "#228b22",
-  fuchsia: "#ff00ff",
-  gainsboro: "#dcdcdc",
-  ghostwhite: "#f8f8ff",
-  gold: "#ffd700",
-  goldenrod: "#daa520",
-  gray: "#808080",
-  green: "#008000",
-  greenyellow: "#adff2f",
-  honeydew: "#f0fff0",
-  hotpink: "#ff69b4",
-  "indianred ": "#cd5c5c",
-  indigo: "#4b0082",
-  ivory: "#fffff0",
-  khaki: "#f0e68c",
-  lavender: "#e6e6fa",
-  lavenderblush: "#fff0f5",
-  lawngreen: "#7cfc00",
-  lemonchiffon: "#fffacd",
-  lightblue: "#add8e6",
-  lightcoral: "#f08080",
-  lightcyan: "#e0ffff",
-  lightgoldenrodyellow: "#fafad2",
-  lightgrey: "#d3d3d3",
-  lightgreen: "#90ee90",
-  lightpink: "#ffb6c1",
-  lightsalmon: "#ffa07a",
-  lightseagreen: "#20b2aa",
-  lightskyblue: "#87cefa",
-  lightslategray: "#778899",
-  lightsteelblue: "#b0c4de",
-  lightyellow: "#ffffe0",
-  lime: "#00ff00",
-  limegreen: "#32cd32",
-  linen: "#faf0e6",
-  magenta: "#ff00ff",
-  maroon: "#800000",
-  mediumaquamarine: "#66cdaa",
-  mediumblue: "#0000cd",
-  mediumorchid: "#ba55d3",
-  mediumpurple: "#9370d8",
-  mediumseagreen: "#3cb371",
-  mediumslateblue: "#7b68ee",
-  mediumspringgreen: "#00fa9a",
-  mediumturquoise: "#48d1cc",
-  mediumvioletred: "#c71585",
-  midnightblue: "#191970",
-  mintcream: "#f5fffa",
-  mistyrose: "#ffe4e1",
-  moccasin: "#ffe4b5",
-  navajowhite: "#ffdead",
-  navy: "#000080",
-  oldlace: "#fdf5e6",
-  olive: "#808000",
-  olivedrab: "#6b8e23",
-  orange: "#ffa500",
-  orangered: "#ff4500",
-  orchid: "#da70d6",
-  palegoldenrod: "#eee8aa",
-  palegreen: "#98fb98",
-  paleturquoise: "#afeeee",
-  palevioletred: "#d87093",
-  papayawhip: "#ffefd5",
-  peachpuff: "#ffdab9",
-  peru: "#cd853f",
-  pink: "#ffc0cb",
-  plum: "#dda0dd",
-  powderblue: "#b0e0e6",
-  purple: "#800080",
-  rebeccapurple: "#663399",
-  red: "#ff0000",
-  rosybrown: "#bc8f8f",
-  royalblue: "#4169e1",
-  saddlebrown: "#8b4513",
-  salmon: "#fa8072",
-  sandybrown: "#f4a460",
-  seagreen: "#2e8b57",
-  seashell: "#fff5ee",
-  sienna: "#a0522d",
-  silver: "#c0c0c0",
-  skyblue: "#87ceeb",
-  slateblue: "#6a5acd",
-  slategray: "#708090",
-  snow: "#fffafa",
-  springgreen: "#00ff7f",
-  steelblue: "#4682b4",
-  tan: "#d2b48c",
-  teal: "#008080",
-  thistle: "#d8bfd8",
-  tomato: "#ff6347",
-  turquoise: "#40e0d0",
-  violet: "#ee82ee",
-  wheat: "#f5deb3",
-  white: "#ffffff",
-  whitesmoke: "#f5f5f5",
-  yellow: "#ffff00",
-  yellowgreen: "#9acd32",
-};
-
-// Shadow the HTML_COLORS constant so we can create a type guard for it.
-type HTML_COLORS = typeof HTML_COLORS;
-
-function isHtmlColor(color: string): color is keyof HTML_COLORS {
-  return color in HTML_COLORS;
-}
-
-export function colorNameToHex(color: string) {
-  const normalizedColor = color.toLowerCase();
-
-  if (isHtmlColor(normalizedColor)) {
-    return HTML_COLORS[normalizedColor];
-  }
-
-  return false;
-}
-
-function computeContrastRatio(a: number[], b: number[]) {
-  const lum1 = computeLuminance(a[0], a[1], a[2]);
-  const lum2 = computeLuminance(b[0], b[1], b[2]);
-
-  const brightest = Math.max(lum1, lum2);
-  const darkest = Math.min(lum1, lum2);
-
-  return (brightest + 0.05) / (darkest + 0.05);
-}
-
-function computeLuminance(r: number, g: number, b: number) {
-  const a = [r, g, b].map((v) => {
-    v /= 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-  });
-
-  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
-}
-
-function hexToRGB(hex: string) {
-  const color = hex.replace("#", "");
-
-  return [parseInt(color.slice(0, 2), 16), parseInt(color.slice(2, 4), 16), parseInt(color.slice(4, 6), 16)];
-}
-
-function normalizeHexCode(hex: string | null, dark: boolean) {
-  if (!hex) {
-    return !dark ? BRAND_COLOR : DARK_BRAND_COLOR;
-  }
-
-  hex = hex.replace("#", "");
-
-  // If the length of the hex code is 3, double up each character
-  // e.g. fff => ffffff or a0e => aa00ee
-  if (hex.length === 3) {
-    hex = hex
-      .split("")
-      .map(function (hex) {
-        return hex + hex;
-      })
-      .join("");
-  }
-
-  return hex;
-}
-
-function getContrastingTextColor(bgColor: string | null, dark: boolean): string {
-  bgColor = bgColor == "" || bgColor == null ? (dark ? DARK_BRAND_COLOR : BRAND_COLOR) : bgColor;
-
-  const rgb = hexToRGB(bgColor);
-
-  const whiteContrastRatio = computeContrastRatio(rgb, [255, 255, 255]);
-  const blackContrastRatio = computeContrastRatio(rgb, [41, 41, 41]); //#292929
-
-  return whiteContrastRatio > blackContrastRatio ? BRAND_TEXT_COLOR : BRAND_COLOR;
-}
-
-/**
- * Given a string, determine if it's a valid 6 character hex code.
- */
-export function isValidHexCode(val: string | null) {
-  if (val) {
-    // Normalize the value into include a leading "#" if it's missing
-    val = val.indexOf("#") === 0 ? val : "#" + val;
-
-    const regex = /^#([A-F0-9]{6}|[A-F0-9]{3})$/i;
-
-    return regex.test(val);
-  }
-
-  return false;
-}
-
-/**
- * Given a html color name, check if it exists in our color palette
- * and if it does, return the hex code for that color. Otherwise,
- * return the default brand color.
- */
-export function fallBackHex(val: string | null, dark: boolean): string {
-  if (val && colorNameToHex(val)) {
-    return colorNameToHex(val) as string;
-  }
-
-  // Otherwise, return the default color
-  return dark ? DARK_BRAND_COLOR : BRAND_COLOR;
-}
-
-/**
- * Given a light and dark brand color value, update the css variables
- * within the document to reflect the new brand colors.
- */
-const BrandColor = ({
-  lightVal = BRAND_COLOR,
-  darkVal = DARK_BRAND_COLOR,
-}: {
-  lightVal: string | undefined | null;
-  darkVal: string | undefined | null;
-}) => {
-  const embedBrandingColors = useBrandColors();
-
-  lightVal = embedBrandingColors.brandColor || lightVal;
-
-  // convert to 6 digit equivalent if 3 digit code is entered
-  lightVal = normalizeHexCode(lightVal, false);
-
-  darkVal = normalizeHexCode(darkVal, true);
-
-  // ensure acceptable hex-code
-  lightVal = isValidHexCode(lightVal)
-    ? lightVal?.indexOf("#") === 0
-      ? lightVal
-      : "#" + lightVal
-    : fallBackHex(lightVal, false);
-
-  darkVal = isValidHexCode(darkVal)
-    ? darkVal?.indexOf("#") === 0
-      ? darkVal
-      : "#" + darkVal
-    : fallBackHex(darkVal, true);
-
-  return (
-    <Head>
-      <style>
-        {`body {
-      /* green--500*/
-      --booking-highlight-color: ${embedBrandingColors.highlightColor || "#10B981"};
-      /*  gray--200 */
-      --booking-lightest-color: ${embedBrandingColors.lightestColor || "#E1E1E1"};
-      /* gray--400 */
-      --booking-lighter-color: ${embedBrandingColors.lighterColor || "#ACACAC"};
-      /* gray--500 */
-      --booking-light-color: ${embedBrandingColors.lightColor || "#888888"};
-      /* gray--600 */
-      --booking-median-color: ${embedBrandingColors.medianColor || "#494949"};
-      /* gray--800 */
-      --booking-dark-color: ${embedBrandingColors.darkColor || "#313131"};
-      /* gray--900 */
-      --booking-darker-color: ${embedBrandingColors.darkerColor || "#292929"};
-      --brand-color: ${lightVal};
-      --brand-text-color: ${getContrastingTextColor(lightVal, true)};
-      --brand-color-dark-mode: ${darkVal};
-      --brand-text-color-dark-mode: ${getContrastingTextColor(darkVal, true)};
-    `}
-      </style>
-    </Head>
-  );
-};
-
-export default BrandColor;
diff --git a/packages/lib/OgImages.tsx b/packages/lib/OgImages.tsx
index 611cddc616..d4be153fd4 100644
--- a/packages/lib/OgImages.tsx
+++ b/packages/lib/OgImages.tsx
@@ -138,7 +138,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
@@ -150,13 +150,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" }}>
@@ -216,7 +216,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>
@@ -234,7 +234,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/lib/getBrandColours.test.ts b/packages/lib/getBrandColours.test.ts
new file mode 100644
index 0000000000..b1152a2e1c
--- /dev/null
+++ b/packages/lib/getBrandColours.test.ts
@@ -0,0 +1,39 @@
+import { createColorMap } from "./getBrandColours";
+
+describe("useGetBrandingColours", () => {
+  it("should return the correct color values for given lightVal and darkVal", () => {
+    const expectedResult = {
+      light: {
+        "50": "#fff3f3",
+        "100": "#ffe8e8",
+        "200": "#ffc5c5",
+        "300": "#ffa2a2",
+        "400": "#ff5c5c",
+        "500": "#ff1616",
+        "600": "#e61414",
+        "700": "#bf1111",
+        "800": "#990d0d",
+        "900": "#7d0b0b",
+      },
+      dark: {
+        "50": "#f2f5ff",
+        "100": "#e6ecff",
+        "200": "#bfcfff",
+        "300": "#99b3ff",
+        "400": "#4d79ff",
+        "500": "#0040ff",
+        "600": "#003ae6",
+        "700": "#0030bf",
+        "800": "#002699",
+        "900": "#001f7d",
+      },
+      // ...
+    };
+
+    const lightMap = createColorMap("#ff1616");
+    const darkMap = createColorMap("#0040ff");
+
+    expect(lightMap).toEqual(expectedResult.light);
+    expect(darkMap).toEqual(expectedResult.dark);
+  });
+});
diff --git a/packages/lib/getBrandColours.tsx b/packages/lib/getBrandColours.tsx
new file mode 100644
index 0000000000..7c7bb3635b
--- /dev/null
+++ b/packages/lib/getBrandColours.tsx
@@ -0,0 +1,197 @@
+import { useBrandColors } from "@calcom/embed-core/embed-iframe";
+
+const BRAND_COLOR = "#292929";
+const DARK_BRAND_COLOR = "#fafafa";
+
+type Rgb = {
+  r: number;
+  g: number;
+  b: number;
+};
+
+/**
+ * Given a html color name, check if it exists in our color palette
+ * and if it does, return the hex code for that color. Otherwise,
+ * return the default brand color.
+ */
+export function fallBackHex(val: string | null, dark: boolean): string {
+  if (val && isValidHexCode(val)) {
+    return val;
+  }
+  return dark ? DARK_BRAND_COLOR : BRAND_COLOR;
+}
+
+export function isValidHexCode(hexColor: string): boolean {
+  // Regular expression for hex color code pattern
+  const hexColorPattern = /^#([0-9A-Fa-f]{3}){1,2}$/;
+
+  // Check if hex color code matches pattern
+  const isHexColor = hexColorPattern.test(hexColor);
+
+  return isHexColor;
+}
+
+function hexToRgb(hex: string): Rgb {
+  const sanitizedHex = hex.replace("##", "#");
+  const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+
+  if (!colorParts) {
+    throw new Error("Invalid Hex colour");
+  }
+
+  const [, r, g, b] = colorParts;
+
+  return {
+    r: parseInt(r, 16),
+    g: parseInt(g, 16),
+    b: parseInt(b, 16),
+  } as Rgb;
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+function lighten(hex: string, intensity: number): string {
+  const color = hexToRgb(`#${hex}`);
+
+  if (!color) {
+    return "";
+  }
+
+  const r = Math.round(color.r + (255 - color.r) * intensity);
+  const g = Math.round(color.g + (255 - color.g) * intensity);
+  const b = Math.round(color.b + (255 - color.b) * intensity);
+
+  return rgbToHex(r, g, b);
+}
+
+function darken(hex: string, intensity: number): string {
+  const color = hexToRgb(hex);
+
+  if (!color) {
+    return "";
+  }
+
+  const r = Math.round(color.r * intensity);
+  const g = Math.round(color.g * intensity);
+  const b = Math.round(color.b * intensity);
+
+  return rgbToHex(r, g, b);
+}
+
+function normalizeHexCode(hex: string | null, dark: boolean) {
+  if (!hex) {
+    return !dark ? BRAND_COLOR : DARK_BRAND_COLOR;
+  }
+
+  hex = hex.replace("#", "");
+
+  // If the length of the hex code is 3, double up each character
+  // e.g. fff => ffffff or a0e => aa00ee
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map(function (hex) {
+        return hex + hex;
+      })
+      .join("");
+  }
+
+  return hex;
+}
+
+export const createColorMap = (brandColor: string) => {
+  const response: Record<string, string> = {
+    500: `#${brandColor}`.replace("##", "#"),
+  };
+  const intensityMap: {
+    [key: number]: number;
+  } = {
+    50: 0.95,
+    100: 0.9,
+    200: 0.75,
+    300: 0.6,
+    400: 0.3,
+    600: 0.9,
+    700: 0.75,
+    800: 0.6,
+    900: 0.49,
+  };
+
+  [50, 100, 200, 300, 400].forEach((level) => {
+    response[level] = lighten(brandColor, intensityMap[level]);
+  });
+
+  [600, 700, 800, 900].forEach((level) => {
+    response[level] = darken(brandColor, intensityMap[level]);
+  });
+  return response;
+};
+
+function getWCAGContrastColor(background: string): string {
+  // Convert the hex background color to RGB
+  const { r, g, b } = hexToRgb(background);
+  // Calculate the luminance of the background color
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+
+  // If the luminance is less than 0.5, use white as the text color, otherwise use black
+  return luminance < 0.5 ? "#FFFFFF" : "#000000";
+}
+
+export function checkWCAGContrastColor(background: string, target: string) {
+  const backgroundRGB = hexToRgb(background);
+  const targetRGB = hexToRgb(target);
+  const bgLuminance = (0.2126 * backgroundRGB.r + 0.7152 * backgroundRGB.g + 0.0722 * backgroundRGB.b) / 255;
+  const targetLuminance = (0.2126 * targetRGB.r + 0.7152 * targetRGB.g + 0.0722 * targetRGB.b) / 255;
+
+  const contrastRadio =
+    (Math.max(bgLuminance, targetLuminance) + 0.05) / (Math.min(targetLuminance, bgLuminance) + 0.05);
+
+  const MIN_CONTRAST_RATIO = 4.5; // used for BGs
+
+  return contrastRadio >= MIN_CONTRAST_RATIO;
+}
+
+/**
+ * Given a light and dark brand color value, update the css variables
+ * within the document to reflect the new brand colors.
+ */
+const useGetBrandingColours = ({
+  lightVal = BRAND_COLOR,
+  darkVal = DARK_BRAND_COLOR,
+}: {
+  lightVal: string | undefined | null;
+  darkVal: string | undefined | null;
+}) => {
+  const embedBrandingColors = useBrandColors();
+
+  lightVal = embedBrandingColors.brandColor || lightVal;
+
+  // convert to 6 digit equivalent if 3 digit code is entered
+  lightVal = normalizeHexCode(lightVal, false);
+
+  darkVal = normalizeHexCode(darkVal, true);
+
+  const lightColourMap = createColorMap(lightVal);
+  const darkColourMap = createColorMap(darkVal);
+
+  const theme = {
+    light: {
+      "cal-brand": lightColourMap["500"],
+      "cal-brand-emphasis": lightColourMap["400"],
+      "cal-brand-subtle": lightColourMap["200"],
+      "cal-brand-text": getWCAGContrastColor(lightColourMap["500"]),
+    },
+    dark: {
+      "cal-brand": darkColourMap["500"],
+      "cal-brand-emphasis": darkColourMap["600"],
+      "cal-brand-subtle": darkColourMap["800"],
+      "cal-brand-text": getWCAGContrastColor(darkColourMap["500"]),
+    },
+  };
+  return theme;
+};
+
+export default useGetBrandingColours;
diff --git a/packages/lib/hooks/useTheme.tsx b/packages/lib/hooks/useTheme.tsx
index 6a8ec8dd86..8a6c4555b2 100644
--- a/packages/lib/hooks/useTheme.tsx
+++ b/packages/lib/hooks/useTheme.tsx
@@ -18,6 +18,10 @@ export default function useTheme(theme?: Maybe<string>) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- we do not want activeTheme to re-render this effect
   }, [currentTheme, setTheme]);
 
+  useEffect(() => {
+    if (forcedTheme) setTheme(forcedTheme);
+  }, [forcedTheme, setTheme]);
+
   return {
     resolvedTheme,
     setTheme,
diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 699262be54..88ec7573db 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 text-default border-none"
       )}>
       <div className="relative flex flex-col md:flex-row">
         <div className="flex-shrink-0">
@@ -47,13 +47,10 @@ export function Alert(props: AlertProps) {
             />
           )}
           {severity === "neutral" && (
-            <FiInfo className={classNames("h-5 w-5 text-gray-800", iconClassName)} aria-hidden="true" />
+            <FiInfo className={classNames("text-default h-5 w-5", 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..198632996e 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,10 +78,10 @@ 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-12 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" />
+          <div className="to-default flex h-12 w-5 bg-gradient-to-l from-transparent" />
         </button>
       )}
       <ul
@@ -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-emphasis text-default" : "bg-muted text-emphasis",
+            "hover:bg-emphasis 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-emphasis text-default" : "bg-muted text-emphasis",
+              "hover:bg-emphasis 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>
@@ -120,9 +120,9 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
       </ul>
       {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="to-default flex h-12 w-5 bg-gradient-to-r from-transparent" />
+          <div className="bg-default flex h-12 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..bb1e6f0b3e 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
+import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
@@ -41,12 +42,20 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
   }, [app.name, searchText]);
 
   return (
-    <div className="relative flex h-64 flex-col rounded-md border border-gray-200 p-5">
+    <div className="border-subtle relative flex h-64 flex-col rounded-md border p-5">
       <div className="flex">
-        <img src={app.logo} alt={app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
+        <img
+          src={app.logo}
+          alt={app.name + " Logo"}
+          className={classNames(
+            app.logo.includes("-dark") && "dark:invert",
+            "mb-4 h-12 w-12 rounded-sm",
+            app.dirName == "caldavcalendar" && "dark:invert" // TODO: Maybe find a better way to handle this @Hariom?
+          )}
+        />
       </div>
       <div className="flex items-center">
-        <h3 className="font-medium">
+        <h3 className="text-emphasis font-medium">
           {searchTextIndex != undefined && searchText ? (
             <>
               {app.name.substring(0, searchTextIndex)}
@@ -60,12 +69,12 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
           )}
         </h3>
       </div>
-      {/* TODO: add reviews <div className="flex text-sm text-gray-800">
+      {/* TODO: add reviews <div className="flex text-sm text-default">
           <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-default mt-2 flex-grow text-sm"
         style={{
           overflow: "hidden",
           display: "-webkit-box",
@@ -144,16 +153,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 text-emphasis flex items-center rounded-md px-2 py-1 text-sm font-normal">
             {t("default")}
           </span>
         )}
diff --git a/packages/ui/components/apps/Categories.tsx b/packages/ui/components/apps/Categories.tsx
index 9aed2fe0a0..e15502bacc 100644
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -37,21 +36,13 @@ export function AppStoreCategories({
             data-testid={`app-store-category-${category.name}`}
             className="relative flex rounded-md"
             style={{ background: "radial-gradient(farthest-side at top right, #a2abbe 0%, #E3E3E3 100%)" }}>
-            <div className="w-full self-center bg-[url('/noise.svg')] bg-cover bg-center bg-no-repeat px-6 pt-2 pb-4">
-              <Image
-                src={"/app-categories/" + category.name + ".svg"}
-                width={100}
-                height={100}
-                alt={category.name}
-                className="dark:invert"
-              />
-
+            <div className="dark:bg-muted light:bg-[url('/noise.svg')] dark:from-subtle dark:to-muted w-full self-center bg-cover bg-center bg-no-repeat px-6 py-4 dark:bg-gradient-to-tr">
               {isLocaleReady ? (
-                <h3 className="text-sm font-semibold capitalize">{category.name}</h3>
+                <h3 className="text-emphasis text-sm font-semibold capitalize">{category.name}</h3>
               ) : (
                 <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..b5b24af526 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 border-subtle divide-subtle -mx-4 animate-pulse divide-y rounded-md border 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..db1bc52cc2 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -37,7 +37,7 @@ export function Avatar(props: AvatarProps) {
   let avatar = (
     <AvatarPrimitive.Root
       className={classNames(
-        "dark:bg-darkgray-300 item-center relative inline-flex aspect-square justify-center overflow-hidden rounded-full",
+        "bg-emphasis item-center relative inline-flex aspect-square justify-center overflow-hidden rounded-full",
         props.className,
         sizesPropsBySize[size]
       )}>
@@ -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..e723a0b8bf 100644
--- a/packages/ui/components/avatar/AvatarGroup.tsx
+++ b/packages/ui/components/avatar/AvatarGroup.tsx
@@ -30,7 +30,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
       {displayedAvatars.map((item, idx) => (
         <li key={idx} className="-mr-[4px] inline-block">
           <Avatar
-            className="border-gray-200"
+            className="border-subtle"
             imageSrc={item.image}
             title={item.title}
             alt={item.alt || ""}
@@ -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 b119ff696a..88531b99a1 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -9,15 +9,15 @@ import type { SVGComponent } from "@calcom/types/SVGComponent";
 const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", {
   variants: {
     variant: {
-      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-attention",
+      warning: "bg-attention text-attention",
+      orange: "bg-attention text-attention",
+      success: "bg-success text-success",
+      green: "bg-success text-success",
+      gray: "bg-subtle text-emphasis",
+      blue: "bg-info text-info",
+      red: "bg-error text-error",
+      error: "bg-error text-error",
     },
     size: {
       sm: "px-1 py-0.5 text-xs leading-3",
diff --git a/packages/ui/components/breadcrumb/Breadcrumb.tsx b/packages/ui/components/breadcrumb/Breadcrumb.tsx
index 2b28a993b0..050185ab45 100644
--- a/packages/ui/components/breadcrumb/Breadcrumb.tsx
+++ b/packages/ui/components/breadcrumb/Breadcrumb.tsx
@@ -23,7 +23,7 @@ export const Breadcrumb = ({ children }: BreadcrumbProps) => {
   });
 
   return (
-    <nav className="text-sm font-normal leading-5 text-gray-600">
+    <nav className="text-default text-sm font-normal leading-5">
       <ol className="flex items-center space-x-2 rtl:space-x-reverse">{childrenSeperated}</ol>
     </nav>
   );
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 91bae1fa30..3a50f71df6 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",
+        secondary: "text-emphasis",
+        minimal: "text-emphasis",
         destructive: "",
       },
       size: {
@@ -64,78 +64,73 @@ const buttonClasses = cva(
     },
     compoundVariants: [
       // Primary variants
-      {
-        disabled: true,
-        color: "primary",
-        className: "bg-gray-800 bg-opacity-30 dark:bg-opacity-30 dark:bg-darkgray-800",
-      },
-      {
-        loading: true,
-        color: "primary",
-        className: "bg-gray-800/30 text-white/30 dark:bg-opacity-30 dark:bg-darkgray-700 dark:text-black/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-emphasis focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-default text-brand",
       }),
+      {
+        disabled: true,
+        color: "primary",
+        className: "bg-brand-subtle bg-opacity-30",
+      },
+      {
+        loading: true,
+        color: "primary",
+        className: "bg-brand-default bg-opacity-30 text-brand-subtle",
+      },
       // 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",
+        className: "border border-subtle bg-opacity-30 text-muted ",
       },
       {
         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",
+        className: "bg-subtle text-emphasis/80",
       },
       ...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  bg-default hover:bg-muted hover:border-emphasis focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis ",
       }),
       // 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",
+        className: "border-subtle bg-opacity-30 text-emphasis/30 ",
       },
       {
         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",
+        className: "bg-subtle text-emphasis/30",
       },
       ...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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-empthasis",
       }),
       // 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 hover:text-red-700/30 border border-default text-emphasis",
       },
       {
         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  border border-default text-emphasis",
       },
       ...applyStyleToMultipleVariants({
         disabled: [false, undefined],
         color: "destructive",
         className:
-          "border border-gray-300 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 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 hover:border-red-100 focus-visible:ring-red-700",
+          "border border-default text-emphasis hover:text-red-700 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 +220,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" : "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/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index b589261b27..25f8cacad5 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -124,7 +124,7 @@ Button are clickable elements that initiates user actions. Labels in the button
         <Button disabled color="secondary">Button text</Button>
         <Button disabled color="minimal">Button text</Button>
         <Button disabled color="destructive">Button text</Button>
-        <Button disabled color="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button disabled color="minimal" variant="icon" StartIcon={FiX}></Button>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index b126e648b7..b7433441f3 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -36,19 +36,19 @@ 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",
-    card: "w-full p-3 border border-gray-200",
+    card: "w-full p-3 border border-subtle",
     title: "text-sm font-cal",
-    description: "text-xs text-gray-600 line-clamp-2",
+    description: "text-xs text-default line-clamp-2",
   },
 };
 
@@ -71,7 +71,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 border-subtle text-default flex flex-col justify-between rounded-md border"
       )}
       {...containerProps}>
       <div>
@@ -89,7 +89,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>
@@ -110,7 +110,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">
@@ -148,12 +148,12 @@ export function Card({
               onClick={actionButton?.onClick}
               target="_blank"
               rel="noreferrer"
-              className="text-xs font-medium">
+              className="text-default text-xs font-medium">
               {learnMore.text}
             </LinkComponent>
           )}
           <button
-            className="p-0 text-xs font-normal text-gray-600 hover:text-gray-800"
+            className="text-default hover:text-emphasis p-0 text-xs font-normal"
             color="minimal"
             onClick={actionButton?.onClick}>
             {actionButton?.child}
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index adf63c252e..45eac28a51 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -28,7 +28,7 @@ export default function FormCard({
 } & JSX.IntrinsicElements["div"]) {
   className = classNames(
     className,
-    "flex items-center group relative w-full rounded-md p-4 border border-gray-200"
+    "flex items-center group relative w-full rounded-md p-4 border border-subtle"
   );
 
   return (
@@ -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>
@@ -54,7 +54,7 @@ export default function FormCard({
       <div className="w-full">
         <div className="flex items-center justify-between">
           <div>
-            <span className="text-sm font-semibold leading-none">{label}</span>
+            <span className="text-emphasis text-sm font-semibold leading-none">{label}</span>
             {badge && (
               <Badge className="ml-2" variant={badge.variant}>
                 {badge.href ? <Link href={badge.href}>{badge.text}</Link> : badge.text}
@@ -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..d2d8718ade 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="border-subtle bg-default mt-10 rounded-md border p-4 dark:bg-black sm:p-8">
       {props.children}
     </div>
   );
diff --git a/packages/ui/components/credits/Credits.tsx b/packages/ui/components/credits/Credits.tsx
index f12c6b9d3a..4528428dcb 100644
--- a/packages/ui/components/credits/Credits.tsx
+++ b/packages/ui/components/credits/Credits.tsx
@@ -16,7 +16,7 @@ export default function Credits() {
   }, []);
 
   return (
-    <small className="mx-3 mt-1 mb-2 hidden text-[0.5rem] opacity-50 lg:block">
+    <small className="text-default mx-3 mt-1 mb-2 hidden text-[0.5rem] opacity-50 lg:block">
       &copy; {new Date().getFullYear()}{" "}
       <Link href="https://go.cal.com/credits" target="_blank" className="hover:underline">
         {COMPANY_NAME}
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 ecc25e278f..d1bfefa8a2 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 fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 transition-opacity dark:bg-opacity-70 " />
         <DialogPrimitive.Content
           {...props}
           className={classNames(
-            "fadeIn fixed left-1/2 top-1/2 z-50 w-full max-w-[22rem] -translate-x-1/2 -translate-y-1/2 rounded bg-white text-left shadow-xl focus-visible:outline-none sm:align-middle",
+            "fadeIn bg-default fixed left-1/2 top-1/2 z-50 w-full max-w-[22rem] -translate-x-1/2 -translate-y-1/2 rounded text-left shadow-xl focus-visible:outline-none 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.tsx b/packages/ui/components/divider/Divider.tsx
index a14c191470..9cff4780d7 100644
--- a/packages/ui/components/divider/Divider.tsx
+++ b/packages/ui/components/divider/Divider.tsx
@@ -1,12 +1,12 @@
 import { classNames } from "@calcom/lib";
 
 export function Divider({ className, ...props }: JSX.IntrinsicElements["hr"]) {
-  className = classNames("gray-200", className);
+  className = classNames("border-subtle", className);
   return <hr className={className} {...props} />;
 }
 
 export function VerticalDivider({ className, ...props }: JSX.IntrinsicElements["svg"]) {
-  className = classNames("mx-3", className);
+  className = classNames("mx-3 text-muted", className);
   return (
     <svg
       className={className}
@@ -17,7 +17,7 @@ export function VerticalDivider({ className, ...props }: JSX.IntrinsicElements["
       ry="6"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
-      <rect width="2" height="16" rx="1" fill="#D1D5DB" />
+      <rect width="2" height="16" rx="1" fill="currentColor" />
     </svg>
   );
 }
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/Editor.tsx b/packages/ui/components/editor/Editor.tsx
index cd2ffec8ee..8c25327761 100644
--- a/packages/ui/components/editor/Editor.tsx
+++ b/packages/ui/components/editor/Editor.tsx
@@ -68,7 +68,7 @@ export const Editor = (props: TextEditorProps) => {
           <div className="editor-inner" style={{ height: props.height }}>
             <RichTextPlugin
               contentEditable={<ContentEditable style={{ height: props.height }} className="editor-input" />}
-              placeholder={<div className="-mt-11 p-3 text-sm text-gray-300">{props.placeholder || ""}</div>}
+              placeholder={<div className="text-muted -mt-11 p-3 text-sm">{props.placeholder || ""}</div>}
             />
             <ListPlugin />
             <LinkPlugin />
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index 783ced3bba..b40210209a 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) => (
@@ -48,7 +48,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
                   <div className="mr-3 text-left md:col-span-1">
                     {`{${t(`${variable}_variable`).toUpperCase().replace(/ /g, "_")}}`}
                   </div>
-                  <div className="hidden text-left text-gray-600 sm:col-span-1 sm:flex">
+                  <div className="text-default hidden text-left sm:col-span-1 sm:flex">
                     {t(`${variable}_info`)}
                   </div>
                 </div>
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index ed6efb33c7..cba2fe16aa 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -27,7 +27,7 @@ import { createPortal } from "react-dom";
 
 import { Button } from "../../button";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
-import { FiChevronDown } from "../../icon";
+import { FiBold, FiChevronDown, FiItalic, FiLink } from "../../icon";
 import type { TextEditorProps } from "../Editor";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";
 
@@ -390,16 +390,16 @@ 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="text-subtle">
                 <>
-                  <span className={"icon block-type " + blockType} />
-                  <span className="text hidden text-gray-700 sm:flex">
+                  <span className={"icon" + blockType} />
+                  <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>
+              <DropdownMenuContent align="start">
                 {Object.keys(blockTypeToBlockName).map((key) => {
                   return (
                     <DropdownMenuItem key={key} className="outline-none hover:ring-0 focus:ring-0">
@@ -408,8 +408,8 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                         type="button"
                         onClick={() => format(key)}
                         className={classNames(
-                          "toolbar-item  w-full rounded-none focus:ring-0",
-                          blockType === key ? "w-full  bg-gray-100" : ""
+                          "w-full rounded-none focus:ring-0",
+                          blockType === key ? "bg-subtle w-full" : ""
                         )}>
                         <>
                           <span className={"icon block-type " + key} />
@@ -426,42 +426,45 @@ export default function ToolbarPlugin(props: TextEditorProps) {
 
         <>
           {!props.excludedToolbarItems?.includes("bold") && (
-            <button
+            <Button
+              color="minimal"
+              variant="icon"
               type="button"
+              StartIcon={FiBold}
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
                 if (isItalic) {
                   editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
                 }
               }}
-              className={"toolbar-item spaced rounded-md " + (isBold ? "active" : "")}
-              aria-label="Format Bold">
-              <i className="format bold" />
-            </button>
+              className={isBold ? "bg-subtle" : ""}
+            />
           )}
           {!props.excludedToolbarItems?.includes("italic") && (
-            <button
+            <Button
+              color="minimal"
+              variant="icon"
               type="button"
+              StartIcon={FiItalic}
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-                if (isBold) {
+                if (isItalic) {
                   editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
                 }
               }}
-              className={"toolbar-item spaced rounded-md " + (isItalic ? "active" : "")}
-              aria-label="Format Italics">
-              <i className="format italic" />
-            </button>
+              className={isItalic ? "bg-subtle" : ""}
+            />
           )}
           {!props.excludedToolbarItems?.includes("link") && (
             <>
-              <button
+              <Button
+                color="minimal"
+                variant="icon"
                 type="button"
+                StartIcon={FiLink}
                 onClick={insertLink}
-                className={"toolbar-item spaced rounded-md " + (isLink ? "active" : "")}
-                aria-label="Insert Link">
-                <i className="format link" />
-              </button>
+                className={isLink ? "bg-subtle" : ""}
+              />
               {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}{" "}
             </>
           )}
diff --git a/packages/ui/components/editor/stylesEditor.css b/packages/ui/components/editor/stylesEditor.css
index 7a34014110..2db91898fd 100644
--- a/packages/ui/components/editor/stylesEditor.css
+++ b/packages/ui/components/editor/stylesEditor.css
@@ -24,13 +24,13 @@
   line-height: 20px;
   font-weight: 400;
   text-align: left;
-  border-color: #D1D5DB;
+  border-color: var(--cal-border);
   border-width: 1px;
   padding: 1px;
 }
 
 .editor-inner {
-  background: #fff;
+  background: var(--cal-bg);
   position: relative;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -70,6 +70,7 @@
 .editor-paragraph {
   margin: 0;
   position: relative;
+  color: var(--cal-text)
 }
 
 .editor-paragraph:last-child {
@@ -119,7 +120,7 @@ pre::-webkit-scrollbar-thumb {
 .toolbar {
   display: flex;
   margin-bottom: 1px;
-  background: #fff;
+  background: var(--cal-bg);
   padding: 2px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
@@ -127,44 +128,38 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .toolbar button.toolbar-item {
-  border: 0;
   display: flex;
+  border: 0;
   padding: 8px;
   cursor: pointer;
-  vertical-align: middle;
-  height: 36px;
+  justify-self: center;
 }
 
 .toolbar button.toolbar-item.spaced {
   margin-right: 2px;
 }
 
-.toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 1px;
-  margin-left: 1px;
-  vertical-align: -0.25em;
-  display: flex;
-  opacity: 0.6;
-}
-
 .icon.paragraph {
   background-image: url(images/icons/text-paragraph.svg);
 }
 
 .toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
+  background-color: var(--cal-bg-inverted);
+  color: var(--cal-text-inverted)
 }
 
 .toolbar button.toolbar-item.active i {
   opacity: 1;
 }
 
-.toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
+.toolbar button.toolbar-item:not(.active):not([disabled]) {
+  background-color: var(--cal-bg);
+  color: var(--cal-text);
+}
+
+.toolbar button.toolbar-item:not(.active):hover {
+  color: var(--cal-text-default);
+  background-color: var(--cal-bg-inverted);
 }
 
 .toolbar select.toolbar-item {
@@ -174,6 +169,7 @@ pre::-webkit-scrollbar-thumb {
   border-radius: 10px;
   padding: 8px;
   vertical-align: middle;
+  appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 70px;
@@ -187,7 +183,6 @@ pre::-webkit-scrollbar-thumb {
   width: 200px;
   vertical-align: middle;
   font-size: 14px;
-  color: #777;
   text-overflow: ellipsis;
   width: 70px;
   overflow: hidden;
@@ -197,12 +192,7 @@ pre::-webkit-scrollbar-thumb {
 
 .toolbar .toolbar-item .icon {
   display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
+  color: var(--cal-text);
 }
 
 #block-controls button:hover {
@@ -364,6 +354,10 @@ pre::-webkit-scrollbar-thumb {
   vertical-align: -0.25em;
 }
 
+i, .icon {
+  fill: currentColor;
+}
+
 .icon.paragraph {
   background-image: url(images/icons/text-paragraph.svg);
 }
diff --git a/packages/ui/components/empty-screen/EmptyScreen.tsx b/packages/ui/components/empty-screen/EmptyScreen.tsx
index db0d0661f4..5b0b2b460e 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -31,20 +31,20 @@ export function EmptyScreen({
       <div
         data-testid="empty-screen"
         className={classNames(
-          "min-h-80 flex w-full flex-col items-center justify-center rounded-md  p-7 lg:p-20",
-          border && "border border-dashed"
+          "min-h-80 flex w-full flex-col items-center justify-center rounded-md p-7 lg:p-20",
+          border && "border-subtle border border-dashed"
         )}>
         {!avatar ? null : (
           <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
         )}
         {!Icon ? null : (
-          <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 flex h-[72px] w-[72px] items-center justify-center rounded-full ">
+            <Icon className="text-default inline-block h-10 w-10 stroke-[1.3px]" />
           </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">
+          <h2 className="text-semibold font-cal text-emphasis mt-6 text-center text-xl">{headline}</h2>
+          <div className="text-default mt-3 mb-8 text-center text-sm font-normal leading-6">
             {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 9315232684..b9066bd0d9 100644
--- a/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
+++ b/packages/ui/components/form/checkbox/MultiSelectCheckboxes.tsx
@@ -36,7 +36,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 166dd3dc34..b8088b50a2 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -2,7 +2,7 @@ import * as Popover from "@radix-ui/react-popover";
 import { useState } from "react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 
-import { fallBackHex, isValidHexCode } from "@calcom/lib/CustomBranding";
+import { fallBackHex, isValidHexCode } from "@calcom/lib/getBrandColours";
 
 export type ColorPickerProps = {
   defaultValue: string;
@@ -20,7 +20,7 @@ const ColorPicker = (props: ColorPickerProps) => {
   return (
     <div className="mt-1 flex h-[38px] items-center justify-center">
       <Popover.Root>
-        <div className="flex h-full w-10 items-center items-center justify-center rounded-l-md border border-r-0 border-gray-300">
+        <div className="border-default flex h-full w-10 items-center items-center justify-center rounded-l-md border border-r-0">
           <Popover.Trigger asChild>
             <button
               className="h-5 w-5 rounded-sm"
@@ -44,7 +44,7 @@ const ColorPicker = (props: ColorPickerProps) => {
       </Popover.Root>
 
       <HexColorInput
-        className="block h-full w-full border border-gray-300 px-3 py-2 ltr:rounded-r-md rtl:rounded-l-md sm:text-sm"
+        className="border-default text-default bg-default block h-full 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 e75a1e215b..316c5439ce 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 border-subtle relative z-10 ml-1.5 origin-top-right rounded-md border 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 gap-x-3 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 space-x-2 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 2601216dbd..0ca5a665ec 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 text-emphasis disabled:hover:border-default 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 disabled:cursor-not-allowed",
         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,15 @@ 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" : "text-default"
+      )}>
       <span className="whitespace-nowrap py-2.5">{children}</span>
     </div>
   </div>
@@ -114,7 +118,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 +169,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 +190,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-default mt-2 flex items-center text-sm">{hint}</div>}
     </div>
   );
 });
@@ -208,7 +212,7 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
   const textLabel = isPasswordVisible ? t("hide_password") : t("show_password");
 
   return (
-    <div className="relative [&_.group:focus-within_.addon-wrapper]:border-neutral-300 [&_.group:hover_.addon-wrapper]:border-gray-400">
+    <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 +223,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 +276,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 text-default focus:border-emphasis placeholder:text-subtle focus:ring-emphasis bg-default block w-full rounded-md border py-2 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-1",
         props.className
       )}
     />
@@ -363,7 +367,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>
   );
@@ -373,7 +377,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..f0fbc11ee3 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 text-emphasis 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 546a442029..80dfa17ce8 100644
--- a/packages/ui/components/form/select/Select.tsx
+++ b/packages/ui/components/form/select/Select.tsx
@@ -38,23 +38,20 @@ export const Select = <
     <ReactSelect
       {...reactSelectProps}
       classNames={{
-        input: () => classNames("dark:text-darkgray-900 text-gray-900", props.classNames?.input),
+        input: () => classNames("text-emphasis", props.classNames?.input),
         option: (state) =>
           classNames(
-            "dark:bg-darkgray-100 flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-gray-700 dark:text-darkgray-700",
-            state.isFocused && "dark:bg-darkgray-200 bg-gray-100",
-            state.isSelected && "dark:bg-darkgray-300 bg-gray-200 text-gray-900 dark:text-darkgray-900",
+            "bg-default flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-default ",
+            state.isFocused && "bg-subtle",
+            state.isSelected && "bg-emphasis text-default",
             props.classNames?.option
           ),
         placeholder: (state) =>
-          classNames(
-            "text-gray-400 text-sm dark:text-darkgray-400",
-            state.isFocused && variant !== "checkbox" && "hidden"
-          ),
-        dropdownIndicator: () => "text-gray-600 dark:text-darkgray-400",
+          classNames("text-muted", state.isFocused && variant !== "checkbox" && "hidden"),
+        dropdownIndicator: () => "text-default",
         control: (state) =>
           classNames(
-            "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:ring-2 focus-within:ring-gray-800 hover:border-gray-400 dark:focus-within:ring-darkgray-900 rounded-md border ",
+            "bg-default border-default !min-h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-2 focus-within:ring-emphasis hover:border-emphasis rounded-md border ",
             state.isMulti
               ? variant === "checkbox"
                 ? "px-3 py-2"
@@ -64,28 +61,20 @@ export const Select = <
               : "py-2 px-3",
             props.classNames?.control
           ),
-        singleValue: () =>
-          classNames(
-            "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400",
-            props.classNames?.singleValue
-          ),
+        singleValue: () => classNames("text-emphasis placeholder:text-muted", props.classNames?.singleValue),
         valueContainer: () =>
-          classNames(
-            "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400 flex gap-1",
-            props.classNames?.valueContainer
-          ),
+          classNames("text-emphasis placeholder:text-muted flex gap-1", props.classNames?.valueContainer),
         multiValue: () =>
           classNames(
-            "dark:bg-darkgray-200 dark:text-darkgray-700 rounded-md bg-gray-100 text-gray-700 py-1.5 px-2 flex items-center text-sm leading-none",
+            "bg-subtle text-default rounded-md py-1.5 px-2 flex items-center text-sm leading-none",
             props.classNames?.multiValue
           ),
         menu: () =>
           classNames(
-            "dark:bg-darkgray-100 rounded-md bg-white text-sm leading-4 dark:text-white mt-1 border border-gray-200 dark:border-darkgray-200 ",
+            "rounded-md bg-default text-sm leading-4 text-default mt-1 border border-subtle",
             props.classNames?.menu
           ),
-        groupHeading: () =>
-          "leading-none text-xs uppercase text-gray-600 dark:text-darkgray-600 pl-2.5 pt-4 pb-2",
+        groupHeading: () => "leading-none text-xs uppercase text-default pl-2.5 pt-4 pb-2",
         menuList: () => classNames("scroll-bar scrollbar-track-w-20 rounded-md", props.classNames?.menuList),
         indicatorsContainer: (state) =>
           classNames(
@@ -93,9 +82,9 @@ export const Select = <
               ? state.isMulti
                 ? "[&>*:last-child]:rotate-180 [&>*:last-child]:transition-transform"
                 : "rotate-180 transition-transform"
-              : "text-gray-600 dark:text-darkgray-600" // Woo it adds another SVG here on multi for some reason
+              : "text-default" // Woo it adds another SVG here on multi for some reason
           ),
-        multiValueRemove: () => "text-gray-600 dark:text-darkgray-600 py-auto ml-2",
+        multiValueRemove: () => "text-default py-auto ml-2",
         ...props.classNames,
       }}
       {...props}
@@ -125,7 +114,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 bab1badbbd..0b585f077f 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -18,7 +18,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}
diff --git a/packages/ui/components/form/selectimproved/components/Item.tsx b/packages/ui/components/form/selectimproved/components/Item.tsx
index 2d437568db..4f6a5e8dd3 100755
--- a/packages/ui/components/form/selectimproved/components/Item.tsx
+++ b/packages/ui/components/form/selectimproved/components/Item.tsx
@@ -23,8 +23,8 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
     return (
       <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"
+          " flex cursor-not-allowed select-none justify-between truncate rounded-[4px] px-3 py-2 text-gray-300 ",
+          focused ? "dark:bg-darkgray-200 bg-muted" : "dark:hover:bg-darkgray-200 hover:bg-subtle"
         )}>
         <>
           <div className="space-x flex items-center">
@@ -36,13 +36,13 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
               className={cn(
                 "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:bg-darkgray-200  dark:border-darkgray-300 bg-gray-800 text-gray-50"
+                  : " 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="text-emphasis h-3 w-3" 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  bg-subtle text-emphasis"
+          : " 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">
@@ -73,13 +73,13 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
           className={cn(
             "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:bg-darkgray-200  dark:border-darkgray-300 bg-gray-800 text-gray-50"
+              : " 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="text-emphasis h-3 w-3" strokeWidth={2} />
       )}
     </li>
   );
diff --git a/packages/ui/components/form/selectimproved/components/Options.tsx b/packages/ui/components/form/selectimproved/components/Options.tsx
index feab464a12..c59cff9e07 100755
--- a/packages/ui/components/form/selectimproved/components/Options.tsx
+++ b/packages/ui/components/form/selectimproved/components/Options.tsx
@@ -56,7 +56,7 @@ function FilteredItem<T extends Option>({
           {index !== 0 && <hr className="mt-2" />}
           <Label
             className={classNames(
-              "dark:text-darkgray-700 mb-2 pl-3 text-xs font-normal uppercase leading-none text-gray-600",
+              " text-default mb-2 pl-3 text-xs font-normal uppercase leading-none",
               index !== 0 ? "mt-5" : "mt-4" // rest, first
             )}>
             {list[item.groupedIndex].label}
diff --git a/packages/ui/components/form/selectimproved/components/SearchInput.tsx b/packages/ui/components/form/selectimproved/components/SearchInput.tsx
index 5d636a988c..0fa73e0ffc 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"
+            : " 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   focus:border-darkgray-900 text-subtle border-subtle w-full rounded-[6px] border 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..69bcbd0b8a 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-subtle"
+                  : "dark:border-darkgray-300 dark:bg-darkgray-50  dark:focus:border-darkgray-700 dark:focus:bg-darkgray-100 dark:focus:text-darkgray-900 dark:hover:text-darkgray-900 bg-default hover:border-empthasis 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"
+                                " 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: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=" 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=" 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..4fd883c1e2 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 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,12 +24,12 @@ const Steps = (props: ISteps) => {
               key={`step-${index}`}
               onClick={() => navigateToStep(index)}
               className={classNames(
-                "h-1 w-full rounded-[1px] bg-black dark:bg-white",
+                "bg-inverted h-1 w-full rounded-[1px]",
                 index < currentStep - 1 ? "cursor-pointer" : ""
               )}
             />
           ) : (
-            <div key={`step-${index}`} className="h-1 w-full rounded-[1px] bg-black bg-opacity-25" />
+            <div key={`step-${index}`} className="bg-emphasis h-1 w-full rounded-[1px] opacity-25" />
           );
         })}
       </div>
diff --git a/packages/ui/components/form/switch/SettingsToggle.tsx b/packages/ui/components/form/switch/SettingsToggle.tsx
index d4474a412f..54f46f7d62 100644
--- a/packages/ui/components/form/switch/SettingsToggle.tsx
+++ b/packages/ui/components/form/switch/SettingsToggle.tsx
@@ -42,8 +42,8 @@ function SettingsToggle({
             />
 
             <div>
-              <Label className="text-sm font-semibold leading-none text-black">{title}</Label>
-              {description && <p className="-mt-1.5 text-sm leading-normal text-gray-600">{description}</p>}
+              <Label className="text-emphasis text-sm font-semibold leading-none">{title}</Label>
+              {description && <p className="text-default -mt-1.5 text-sm leading-normal">{description}</p>}
             </div>
           </div>
           {children && (
diff --git a/packages/ui/components/form/switch/Switch.tsx b/packages/ui/components/form/switch/Switch.tsx
index 409eecc5c7..055c24a348 100644
--- a/packages/ui/components/form/switch/Switch.tsx
+++ b/packages/ui/components/form/switch/Switch.tsx
@@ -31,19 +31,17 @@ 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",
-            primitiveProps.disabled ? "cursor-not-allowed" : "hover:bg-gray-300",
-            "focus:ring-brand-800 h-5 w-[34px] rounded-full shadow-none",
+            props.checked ? "bg-inverted" : "bg-emphasis",
+            primitiveProps.disabled && "cursor-not-allowed",
+            "focus:ring-brand-default h-5 w-[34px] rounded-full shadow-none",
             props.className
           )}
           {...primitiveProps}>
           <PrimitiveSwitch.Thumb
             id={id}
-            // 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]",
-              props.checked && "shadow-inner",
+              "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 ? "bg-default shadow-inner" : "bg-inverted",
               props.thumbProps?.className
             )}
           />
@@ -52,7 +50,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 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/timezone-select/TimezoneSelect.tsx b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
index b6b9f86b46..ff286b98fd 100644
--- a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
+++ b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
@@ -49,56 +49,48 @@ export function TimezoneSelect({
       formatOptionLabel={(option) => <p className="truncate">{(option as ITimezoneOption).value}</p>}
       getOptionLabel={(option) => handleOptionLabel(option as ITimezoneOption, cities)}
       classNames={{
-        input: (state) =>
-          classNames("dark:text-darkgray-900 text-gray-900", props.classNames?.input?.(state)),
+        input: () => classNames("text-emphasis", props.classNames?.input),
         option: (state) =>
           classNames(
-            "dark:bg-darkgray-100 flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-gray-700 dark:text-darkgray-700",
-            state.isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
-            state.isSelected && "dark:!bg-darkgray-300 !bg-gray-200 text-gray-900 !dark:text-darkgray-900",
+            "bg-default flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-default ",
+            state.isFocused && "bg-subtle",
+            state.isSelected && "bg-emphasis text-default",
             props.classNames?.option
           ),
-        placeholder: (state) =>
-          classNames("text-gray-400 text-sm dark:text-darkgray-400", state.isFocused && "hidden"),
-        dropdownIndicator: () => "text-gray-600 dark:text-darkgray-400",
+        placeholder: (state) => classNames("text-muted", state.isFocused && "hidden"),
+        dropdownIndicator: () => "text-default",
         control: (state) =>
           classNames(
             variant === "default"
-              ? "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:ring-2 focus-within:ring-gray-800 hover:border-gray-400 dark:focus-within:ring-darkgray-900 rounded-md border py-2 px-3"
-              : "text-sm ",
-            props.classNames?.control?.(state)
-          ), // We remove all styling here to fit theme of booking page - no min-h also
-        singleValue: (state) =>
-          classNames(
-            "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400",
-            props.classNames?.singleValue?.(state)
+              ? "px-3 py-2 bg-default border-default !min-h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-2 focus-within:ring-emphasis hover:border-emphasis rounded-md border "
+              : "text-sm",
+            props.classNames?.control
           ),
-        valueContainer: (state) =>
+        singleValue: () => classNames("text-emphasis placeholder:text-muted", props.classNames?.singleValue),
+        valueContainer: () =>
+          classNames("text-emphasis placeholder:text-muted flex gap-1", props.classNames?.valueContainer),
+        multiValue: () =>
           classNames(
-            "dark:text-darkgray-900 dark:placeholder:text-darkgray-500 text-black placeholder:text-gray-400 flex gap-1",
-            props.classNames?.valueContainer?.(state)
+            "bg-subtle text-default rounded-md py-1.5 px-2 flex items-center text-sm leading-none",
+            props.classNames?.multiValue
           ),
-        multiValue: (state) =>
+        menu: () =>
           classNames(
-            "dark:bg-darkgray-200 dark:text-darkgray-700 rounded-md bg-gray-100 text-gray-700 py-1.5 px-2 flex items-center text-sm leading-none",
-            props.classNames?.multiValue?.(state)
+            "rounded-md bg-default text-sm leading-4 text-default mt-1 border border-subtle",
+            props.classNames?.menu
           ),
-        menu: (state) =>
-          classNames(
-            "dark:bg-darkgray-100 rounded-md bg-white text-sm leading-4 dark:text-white mt-1 border border-gray-200 dark:border-darkgray-200 ",
-            props.classNames?.menu?.(state)
-          ),
-        menuList: (state) =>
-          classNames("scroll-bar scrollbar-track-w-20 rounded-md", props.classNames?.menuList?.(state)),
+        groupHeading: () => "leading-none text-xs uppercase text-default pl-2.5 pt-4 pb-2",
+        menuList: () => classNames("scroll-bar scrollbar-track-w-20 rounded-md", props.classNames?.menuList),
         indicatorsContainer: (state) =>
           classNames(
             state.selectProps.menuIsOpen
               ? state.isMulti
                 ? "[&>*:last-child]:rotate-180 [&>*:last-child]:transition-transform"
                 : "rotate-180 transition-transform"
-              : "text-gray-600 dark:text-darkgray-600" // Woo it adds another SVG here on multi for some reason
+              : "text-default" // Woo it adds another SVG here on multi for some reason
           ),
-        multiValueRemove: () => "text-gray-600 dark:text-darkgray-600 py-auto ml-2",
+        multiValueRemove: () => "text-default py-auto ml-2",
+        ...props.classNames,
       }}
     />
   );
diff --git a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
index fd6455811e..8bdb57d9b7 100644
--- a/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/BooleanToggleGroup.tsx
@@ -34,14 +34,14 @@ 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-default hover:bg-subtle hover:text-emphasis");
   return (
     <ToggleGroupPrimitive
       value={yesNoValue}
       type="single"
       disabled={disabled}
-      className="flex space-x-2 rounded-md border border-gray-200 p-1 rtl:space-x-reverse"
+      className="border-subtle flex space-x-2 rounded-md border p-1 rtl:space-x-reverse"
       onValueChange={(yesNoValue: "yes" | "no") => {
         setYesNoValue(yesNoValue);
         onValueChange(boolean(yesNoValue));
@@ -80,7 +80,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 ec795e87b5..cc942b987f 100644
--- a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
@@ -25,14 +25,14 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
         {...props}
         onValueChange={setValue}
         className={classNames(
-          "dark:border-darkgray-200 min-h-9 dark:bg-darkgray-50 relative inline-flex gap-0.5 rounded-md border border-gray-200 p-1",
+          "min-h-9 bg-muted border-default relative inline-flex gap-0.5 rounded-md border p-1",
           props.className,
           isFullWidth && "w-full"
         )}>
         {/* 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="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,8 +43,8 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
             className={classNames(
               "relative rounded-[4px] px-3 py-1 text-sm leading-tight",
               option.disabled
-                ? "dark:text-darkgray-900 text-gray-400 hover:cursor-not-allowed"
-                : "dark:text-darkgray-800 dark:[&[aria-checked='false']]:hover:bg-darkgray-100 [&[aria-checked='false']]:hover:bg-gray-100",
+                ? " text-gray-400 hover:cursor-not-allowed"
+                : " text-default [&[aria-checked='false']]:hover:bg-subtle",
               isFullWidth && "w-full"
             )}
             ref={(node) => {
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..cef443c763 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-emphasis w-full text-center text-sm sm:text-xs">
                     {t("no_target", { target })}
                   </p>
                 )}
@@ -188,13 +188,13 @@ 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-subtle hover:bg-muted hover:text-emphasis border-subtle text-default 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">
               <input
                 onInput={onInputFile}
                 type="file"
                 name={id}
                 placeholder={t("upload_image")}
-                className="pointer-events-none absolute mt-4 opacity-0"
+                className="text-default pointer-events-none absolute mt-4 opacity-0 "
                 accept="image/*"
               />
               {t("choose_a_file")}
@@ -202,8 +202,10 @@ export default function ImageUploader({
           </div>
         </div>
         <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-4">
-          <DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
-          <DialogClose color="secondary">{t("cancel")}</DialogClose>
+          <DialogClose color="secondary" onClick={() => showCroppedImage(croppedAreaPixels)}>
+            {t("save")}
+          </DialogClose>
+          <DialogClose color="minimal">{t("cancel")}</DialogClose>
         </div>
       </DialogContent>
     </Dialog>
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..9289ef57aa 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -17,7 +17,8 @@ export function List(props: ListProps) {
         "-mx-4 rounded-sm sm:mx-0 sm:overflow-hidden ",
         // Add rounded top and bottome if roundContainer is true
         props.roundContainer && "[&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md ",
-        !props.noBorderTreatment && "divide-y divide-gray-200 rounded-md border border-l border-r ",
+        !props.noBorderTreatment &&
+          "border-subtle divide-subtle divide-y rounded-md border border-l border-r ",
         props.className
       )}>
       {props.children}
@@ -39,12 +40,12 @@ 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 border-subtle",
         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",
         props.className,
-        (props.onClick || href) && "hover:bg-neutral-50"
+        (props.onClick || href) && "hover:bg-muted"
       ),
     },
     props.children
@@ -76,15 +77,15 @@ export function ListLinkItem(props: ListLinkItemProps) {
   return (
     <li
       className={classNames(
-        "group flex w-full items-center justify-between p-5 hover:bg-neutral-50",
+        "group flex w-full items-center justify-between p-5",
         className,
-        disabled ? "hover:bg-white" : ""
+        disabled ? "hover:bg-muted" : ""
       )}>
       <Link
         passHref
         href={href}
         className={classNames(
-          "flex-grow truncate text-sm",
+          "text-default flex-grow truncate text-sm",
           disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
         )}>
         <h1 className="text-sm font-semibold leading-none">{heading}</h1>
@@ -108,7 +109,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 +124,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/logo/Logo.tsx b/packages/ui/components/logo/Logo.tsx
index 7ec2664462..0deb1a2ac2 100644
--- a/packages/ui/components/logo/Logo.tsx
+++ b/packages/ui/components/logo/Logo.tsx
@@ -2,7 +2,7 @@ import { LOGO_ICON, LOGO } from "@calcom/lib/constants";
 
 export default function Logo({ small, icon }: { small?: boolean; icon?: boolean }) {
   return (
-    <h3 className="logo inline">
+    <h3 className="logo inline dark:invert">
       <strong>
         {icon ? (
           <img className="mx-auto w-9" alt="Cal" title="Cal" src={LOGO_ICON} />
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index 0f051ab51b..b72a498035 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-default ",
         "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..b1ed623012 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -50,8 +50,8 @@ const VerticalTabItem = function ({
             {...linkProps}
             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",
+              props.textClassNames || "text-default text-sm font-medium leading-none",
+              "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..f87a15b6cf 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 text-default hover:text-emphasis 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 border-default absolute z-50 mt-2 max-h-64 w-56 overflow-y-scroll rounded-md border py-[2px] shadow-sm 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..4795ff7661 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 border-subtle rounded-md 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..233908efc6 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(`bg-emphasis mt-1 rounded-full ltr:mr-2 rtl:ml-2`, className)} />;
 };
 
 type SkeletonProps<T> = {
@@ -52,10 +52,7 @@ const Skeleton = <T extends keyof JSX.IntrinsicElements | React.FC>({
     <Component
       className={classNames(
         loading
-          ? classNames(
-              "font-size-0 dark:white-300 animate-pulse rounded-md bg-gray-300 text-transparent",
-              loadingClassName
-            )
+          ? classNames("font-size-0 bg-subtle animate-pulse rounded-md text-transparent", loadingClassName)
           : "",
         className
       )}
@@ -72,7 +69,7 @@ const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean }> = ({
   return (
     <span
       className={classNames(
-        `font-size-0 dark:white-300 inline-block animate-pulse rounded-md bg-gray-300 empty:before:inline-block empty:before:content-['']`,
+        `font-size-0 bg-subtle inline-block animate-pulse rounded-md empty:before:inline-block empty:before:content-['']`,
         className,
         invisible ? "invisible" : ""
       )}
@@ -83,7 +80,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(`bg-emphasis rounded-md`, className)} />
     </SkeletonContainer>
   );
 };
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index c13459be85..b1d7583163 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-brand 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..6fa833f68d 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 text-inverted relative rounded-md px-2 py-1 text-xs font-semibold shadow-lg"
           )}
           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 c47eb85af2..d5fc45db60 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..4c40ffdc75 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: "border-0 text-sm focus:ring-0 dark:bg-muted text-default",
       }}
-      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 border-default disabled:text-subtle disabled:dark:text-subtle  ring-emphasis block w-full rounded-md rounded-sm border border py-px pl-3 focus-within:ring-1 disabled:opacity-50 `}
     />
   );
 }
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..d2976a9089 100644
--- a/packages/ui/form/radio-area/Radio.tsx
+++ b/packages/ui/form/radio-area/Radio.tsx
@@ -1,5 +1,6 @@
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import type { ReactNode } from "react";
+import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 
@@ -10,7 +11,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 focus:ring-emphasis mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border focus:ring-2",
       props.disabled && "opacity-60"
     )}>
     {props.children}
@@ -19,8 +20,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 dark:after:bg-inverted 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-muted" : "bg-black"
     )}
   />
 );
@@ -29,8 +30,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 w-full text-sm font-medium leading-5 ltr:ml-2 rtl:mr-2",
+      props.disabled && "text-subtle"
     )}
   />
 );
@@ -40,13 +41,15 @@ export const RadioField = ({
   disabled,
   id,
   value,
+  className,
 }: {
-  label: string;
+  label: string | ReactNode;
   disabled?: boolean;
   id: string;
   value: string;
+  className?: string;
 }) => (
-  <div className="flex items-start">
+  <div className={classNames("flex items-start", className)}>
     <Radio value={value} disabled={disabled} id={id}>
       <Indicator disabled={disabled} />
     </Radio>
diff --git a/packages/ui/form/radio-area/RadioAreaGroup.tsx b/packages/ui/form/radio-area/RadioAreaGroup.tsx
index f67f33be56..e0605f91b8 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 bg-subtle border-emphasis focus:ring-none peer absolute top-[0.9rem] left-3 align-baseline"
           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="text-default peer-checked:border-emphasis border-subtle rounded-md border p-4 pt-3 pl-10">
           {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}>
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 908c89fbb8..c50eb3f529 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -129,3 +129,4 @@ export type { Option as MultiSelectCheckboxesOptionType } from "./components/for
 export { default as ImageUploader } from "./components/image-uploader/ImageUploader";
 export type { ButtonColor } from "./components/button/Button";
 export { CreateButton } from "./components/createButton";
+export { useCalcomTheme } from "./styles/useCalcomTheme";
diff --git a/packages/ui/styles/useCalcomTheme.tsx b/packages/ui/styles/useCalcomTheme.tsx
new file mode 100644
index 0000000000..9dc215f0fa
--- /dev/null
+++ b/packages/ui/styles/useCalcomTheme.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+type CssVariables = Record<string, string>;
+
+// Sets up CSS Variables based on brand colours
+const useCalcomTheme = (theme: Record<string, CssVariables>) => {
+  useEffect(() => {
+    Object.entries(theme).forEach(([key, value]) => {
+      if (key === "root") {
+        const root = document.documentElement;
+        Object.entries(value).forEach(([key, value]) => {
+          root.style.setProperty(`--${key}`, value);
+        });
+        return;
+      }
+
+      const elements = document.querySelectorAll(`.${key}`);
+      const nestedEntries = Object.entries(value);
+      nestedEntries.forEach(([nestedKey, nestedValue]) => {
+        elements.forEach((element) => {
+          (element as HTMLElement).style.setProperty(`--${nestedKey}`, nestedValue);
+        });
+      });
+    });
+  }, [theme]);
+};
+
+export { useCalcomTheme };
diff --git a/yarn.lock b/yarn.lock
index ef4d015379..92568a9661 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3874,27 +3874,35 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@calcom/api@workspace:apps/api"
   dependencies:
+    "@calcom/app-store": "*"
+    "@calcom/core": "*"
+    "@calcom/dayjs": "*"
+    "@calcom/emails": "*"
+    "@calcom/embed-core": "*"
+    "@calcom/embed-snippet": "*"
+    "@calcom/features": "*"
+    "@calcom/lib": "*"
     "@calcom/prisma": "*"
     "@calcom/trpc": "*"
     "@calcom/tsconfig": "*"
     "@calcom/types": "*"
-    "@sentry/nextjs": ^6.19.7
+    "@sentry/nextjs": ^7.20.0
     babel-jest: ^28.1.0
     bcryptjs: ^2.4.3
     jest: ^28.1.0
     memory-cache: ^0.2.0
     modify-response-middleware: ^1.1.0
-    next: ^12.2.5
+    next: ^13.1.1
     next-api-middleware: ^1.0.1
-    next-axiom: ^0.10.0
+    next-axiom: ^0.16.0
     next-swagger-doc: ^0.3.4
-    next-transpile-modules: ^9.0.0
+    next-transpile-modules: ^10.0.0
     next-validations: ^0.2.0
     node-mocks-http: ^1.11.0
     typescript: ^4.7.4
     tzdata: ^1.0.30
     uuid: ^8.3.2
-    zod: ^3.18.0
+    zod: ^3.20.2
   languageName: unknown
   linkType: soft
 
@@ -4025,28 +4033,29 @@ __metadata:
     "@calcom/ui": "*"
     "@headlessui/react": ^1.5.0
     "@heroicons/react": ^1.0.6
-    "@prisma/client": ^4.11.0
+    "@prisma/client": ^4.8.1
     "@tailwindcss/forms": ^0.5.2
     "@types/node": 16.9.1
-    "@types/react": 18.0.26
+    "@types/react": ^18.0.17
     autoprefixer: ^10.4.12
     chart.js: ^3.7.1
     client-only: ^0.0.1
-    eslint: ^8.34.0
-    next: ^13.2.1
-    next-auth: ^4.20.1
+    eslint: ^8.22.0
+    next: ^13.1.1
+    next-auth: ^4.10.3
     next-i18next: ^11.3.0
+    next-transpile-modules: ^10.0.0
     postcss: ^8.4.18
-    prisma: ^4.11.0
+    prisma: ^4.8.1
     prisma-field-encryption: ^1.4.0
     react: ^18.2.0
     react-chartjs-2: ^4.0.1
     react-dom: ^18.2.0
-    react-hook-form: ^7.43.3
+    react-hook-form: ^7.34.2
     react-live-chat-loader: ^2.7.3
     swr: ^1.2.2
     tailwindcss: ^3.2.1
-    typescript: ^4.9.4
+    typescript: ^4.7.4
     zod: ^3.20.2
   languageName: unknown
   linkType: soft
@@ -4140,7 +4149,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@calcom/embed-core@workspace:*, @calcom/embed-core@workspace:packages/embeds/embed-core":
+"@calcom/embed-core@*, @calcom/embed-core@workspace:*, @calcom/embed-core@workspace:packages/embeds/embed-core":
   version: 0.0.0-use.local
   resolution: "@calcom/embed-core@workspace:packages/embeds/embed-core"
   dependencies:
@@ -4154,7 +4163,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@calcom/embed-react@workspace:*, @calcom/embed-react@workspace:^, @calcom/embed-react@workspace:packages/embeds/embed-react":
+"@calcom/embed-react@^1.0.9, @calcom/embed-react@workspace:*, @calcom/embed-react@workspace:packages/embeds/embed-react":
   version: 0.0.0-use.local
   resolution: "@calcom/embed-react@workspace:packages/embeds/embed-react"
   dependencies:
@@ -4174,7 +4183,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@calcom/embed-snippet@workspace:*, @calcom/embed-snippet@workspace:packages/embeds/embed-snippet":
+"@calcom/embed-snippet@*, @calcom/embed-snippet@workspace:*, @calcom/embed-snippet@workspace:packages/embeds/embed-snippet":
   version: 0.0.0-use.local
   resolution: "@calcom/embed-snippet@workspace:packages/embeds/embed-snippet"
   dependencies:
@@ -4640,15 +4649,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@calcom/sylapsvideo@workspace:packages/app-store/sylapsvideo":
-  version: 0.0.0-use.local
-  resolution: "@calcom/sylapsvideo@workspace:packages/app-store/sylapsvideo"
-  dependencies:
-    "@calcom/lib": "*"
-    "@calcom/types": "*"
-  languageName: unknown
-  linkType: soft
-
 "@calcom/tandemvideo@workspace:packages/app-store/tandemvideo":
   version: 0.0.0-use.local
   resolution: "@calcom/tandemvideo@workspace:packages/app-store/tandemvideo"
@@ -4927,18 +4927,19 @@ __metadata:
     "@calcom/app-store": "*"
     "@calcom/config": "*"
     "@calcom/dayjs": "*"
-    "@calcom/embed-react": "workspace:^"
+    "@calcom/embed-react": ^1.0.9
     "@calcom/features": "*"
     "@calcom/lib": "*"
     "@calcom/prisma": "*"
     "@calcom/tsconfig": "*"
     "@calcom/ui": "*"
+    "@daily-co/daily-js": ^0.26.0
     "@floating-ui/react-dom": ^1.0.0
     "@headlessui/react": ^1.5.0
     "@heroicons/react": ^1.0.6
     "@hookform/resolvers": ^2.9.7
     "@juggle/resize-observer": ^3.4.0
-    "@next/bundle-analyzer": ^13.1.6
+    "@next/bundle-analyzer": ^12.2.5
     "@radix-ui/react-accordion": ^1.0.0
     "@radix-ui/react-navigation-menu": ^1.0.0
     "@radix-ui/react-portal": ^1.0.0
@@ -4953,32 +4954,29 @@ __metadata:
     "@types/gtag.js": ^0.0.10
     "@types/micro": 7.3.7
     "@types/node": 16.9.1
-    "@types/react": 18.0.26
+    "@types/react": ^18.0.17
     "@types/react-gtm-module": ^2.0.1
     "@vercel/analytics": ^0.1.6
     "@vercel/edge-functions-ui": ^0.2.1
     autoprefixer: ^10.4.12
     bcryptjs: ^2.4.3
     cobe: ^0.4.1
-    concurrently: ^7.6.0
     cross-env: ^7.0.3
     datocms-structured-text-to-plain-text: ^2.0.4
     datocms-structured-text-utils: ^2.0.4
     debounce: ^1.2.1
     env-cmd: ^10.1.0
-    eslint: ^8.34.0
+    eslint: ^8.22.0
     fathom-client: ^3.5.0
-    globby: ^13.1.3
     gray-matter: ^4.0.3
     gsap: ^3.11.0
     iframe-resizer-react: ^1.1.0
     keen-slider: ^6.8.0
-    lucide-react: ^0.125.0
-    micro: ^10.0.1
-    next: 13.2.4-canary.5
-    next-auth: ^4.20.1
+    micro: ^9.4.1
+    next: ^13.1.1
+    next-auth: ^4.10.3
     next-i18next: ^11.3.0
-    playwright: ^1.31.2
+    next-transpile-modules: ^10.0.0
     postcss: ^8.4.18
     prism-react-renderer: ^1.3.5
     react: ^18.2.0
@@ -4988,18 +4986,17 @@ __metadata:
     react-dom: ^18.2.0
     react-fast-marquee: ^1.3.5
     react-github-btn: ^1.4.0
-    react-hook-form: ^7.43.3
+    react-hook-form: ^7.34.2
     react-hot-toast: ^2.3.0
-    react-live-chat-loader: ^2.8.1
+    react-live-chat-loader: ^2.7.3
     react-merge-refs: 1.1.0
     react-twemoji: ^0.3.0
     react-use-measure: ^2.1.1
-    remark: ^14.0.2
+    remark: ^14.0.1
     remark-html: ^14.0.1
     stripe: ^9.16.0
     tailwindcss: ^3.2.1
-    typescript: ^4.9.4
-    wait-on: ^7.0.1
+    typescript: ^4.7.4
     zod: ^3.20.2
   languageName: unknown
   linkType: soft
@@ -5115,6 +5112,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@daily-co/daily-js@npm:^0.26.0":
+  version: 0.26.0
+  resolution: "@daily-co/daily-js@npm:0.26.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    bowser: ^2.8.1
+    events: ^3.1.0
+    fast-equals: ^1.6.3
+    lodash: ^4.17.15
+  checksum: fadfc0cae4a9a872e94ca0a3207cea52ec34d8c38b1ffd6f63294d35c0b5947bb11f553ac827e20d9ad885e25121c46a4d5aedd37ed189d7b6b7c6cf62cbaa76
+  languageName: node
+  linkType: hard
+
 "@daily-co/daily-js@npm:^0.37.0":
   version: 0.37.0
   resolution: "@daily-co/daily-js@npm:0.37.0"
@@ -5542,6 +5552,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint-community/eslint-utils@npm:^4.2.0":
+  version: 4.4.0
+  resolution: "@eslint-community/eslint-utils@npm:4.4.0"
+  dependencies:
+    eslint-visitor-keys: ^3.3.0
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: cdfe3ae42b4f572cbfb46d20edafe6f36fc5fb52bf2d90875c58aefe226892b9677fef60820e2832caf864a326fe4fc225714c46e8389ccca04d5f9288aabd22
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.4.0":
+  version: 4.5.0
+  resolution: "@eslint-community/regexpp@npm:4.5.0"
+  checksum: 99c01335947dbd7f2129e954413067e217ccaa4e219fe0917b7d2bd96135789384b8fedbfb8eb09584d5130b27a7b876a7150ab7376f51b3a0c377d5ce026a10
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^1.0.5":
   version: 1.3.0
   resolution: "@eslint/eslintrc@npm:1.3.0"
@@ -5576,6 +5604,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint/eslintrc@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "@eslint/eslintrc@npm:2.0.2"
+  dependencies:
+    ajv: ^6.12.4
+    debug: ^4.3.2
+    espree: ^9.5.1
+    globals: ^13.19.0
+    ignore: ^5.2.0
+    import-fresh: ^3.2.1
+    js-yaml: ^4.1.0
+    minimatch: ^3.1.2
+    strip-json-comments: ^3.1.1
+  checksum: cfcf5e12c7b2c4476482e7f12434e76eae16fcd163ee627309adb10b761e5caa4a4e52ed7be464423320ff3d11eca5b50de5bf8be3e25834222470835dd5c801
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:8.37.0":
+  version: 8.37.0
+  resolution: "@eslint/js@npm:8.37.0"
+  checksum: 7a07fb085c94ce1538949012c292fd3a6cd734f149bc03af6157dfbd8a7477678899ef57b4a27e15b36470a997389ad79a0533d5880c71e67720ae1a7de7c62d
+  languageName: node
+  linkType: hard
+
 "@ethereumjs/common@npm:^2.5.0, @ethereumjs/common@npm:^2.6.3":
   version: 2.6.3
   resolution: "@ethereumjs/common@npm:2.6.3"
@@ -6450,22 +6502,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hapi/hoek@npm:^9.0.0":
-  version: 9.3.0
-  resolution: "@hapi/hoek@npm:9.3.0"
-  checksum: 4771c7a776242c3c022b168046af4e324d116a9d2e1d60631ee64f474c6e38d1bb07092d898bf95c7bc5d334c5582798a1456321b2e53ca817d4e7c88bc25b43
-  languageName: node
-  linkType: hard
-
-"@hapi/topo@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "@hapi/topo@npm:5.1.0"
-  dependencies:
-    "@hapi/hoek": ^9.0.0
-  checksum: 604dfd5dde76d5c334bd03f9001fce69c7ce529883acf92da96f4fe7e51221bf5e5110e964caca287a6a616ba027c071748ab636ff178ad750547fba611d6014
-  languageName: node
-  linkType: hard
-
 "@headlessui/react@npm:^1.5.0":
   version: 1.7.13
   resolution: "@headlessui/react@npm:1.7.13"
@@ -7860,6 +7896,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@next/bundle-analyzer@npm:^12.2.5":
+  version: 12.3.4
+  resolution: "@next/bundle-analyzer@npm:12.3.4"
+  dependencies:
+    webpack-bundle-analyzer: 4.3.0
+  checksum: 611cc07194a5cdd4aa0d1db5bae2de807cb2388d2c623f8d7ab8d581f8d01ec1510bd73ae3977334f7957278540ec0e2b2ebd48f9476235bd7b65055c560dc44
+  languageName: node
+  linkType: hard
+
 "@next/bundle-analyzer@npm:^13.1.6":
   version: 13.1.6
   resolution: "@next/bundle-analyzer@npm:13.1.6"
@@ -7869,13 +7914,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/env@npm:12.3.4"
-  checksum: daa3fc11efd1344c503eab41311a0e503ba7fd08607eeb3dc571036a6211eb37959cc4ed48b71dcc411cc214e7623ffd02411080aad3e09dc6a1192d5b256e60
-  languageName: node
-  linkType: hard
-
 "@next/env@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/env@npm:13.2.3"
@@ -7883,10 +7921,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/env@npm:13.2.4-canary.5"
-  checksum: d46767ba464334b8487b671a9b366b25e7c1b6bf262bd66afd62b07b17f52066158fe69b14db3abc8219e1e580cd60e0655af6c71550506770780d1ba28ae92d
+"@next/env@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/env@npm:13.2.4"
+  checksum: 4123e08a79e66d6144006972027a9ceb8f3fdd782c4a869df1eb3b91b59ad9f4a44082d3f8e421f4df5214c6bc7190b52b94881369452d65eb4580485f33b9e6
   languageName: node
   linkType: hard
 
@@ -7899,13 +7937,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm-eabi@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-android-arm-eabi@npm:12.3.4"
-  conditions: os=android & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@next/swc-android-arm-eabi@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-android-arm-eabi@npm:13.2.3"
@@ -7913,20 +7944,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm-eabi@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-android-arm-eabi@npm:13.2.4-canary.5"
+"@next/swc-android-arm-eabi@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-android-arm-eabi@npm:13.2.4"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm64@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-android-arm64@npm:12.3.4"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@next/swc-android-arm64@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-android-arm64@npm:13.2.3"
@@ -7934,20 +7958,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm64@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-android-arm64@npm:13.2.4-canary.5"
+"@next/swc-android-arm64@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-android-arm64@npm:13.2.4"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-darwin-arm64@npm:12.3.4"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-arm64@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-darwin-arm64@npm:13.2.3"
@@ -7955,20 +7972,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-darwin-arm64@npm:13.2.4-canary.5"
+"@next/swc-darwin-arm64@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-darwin-arm64@npm:13.2.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-darwin-x64@npm:12.3.4"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-x64@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-darwin-x64@npm:13.2.3"
@@ -7976,20 +7986,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-darwin-x64@npm:13.2.4-canary.5"
+"@next/swc-darwin-x64@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-darwin-x64@npm:13.2.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-freebsd-x64@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-freebsd-x64@npm:12.3.4"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@next/swc-freebsd-x64@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-freebsd-x64@npm:13.2.3"
@@ -7997,20 +8000,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-freebsd-x64@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-freebsd-x64@npm:13.2.4-canary.5"
+"@next/swc-freebsd-x64@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-freebsd-x64@npm:13.2.4"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm-gnueabihf@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-linux-arm-gnueabihf@npm:12.3.4"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-arm-gnueabihf@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-linux-arm-gnueabihf@npm:13.2.3"
@@ -8018,20 +8014,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm-gnueabihf@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-linux-arm-gnueabihf@npm:13.2.4-canary.5"
+"@next/swc-linux-arm-gnueabihf@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-linux-arm-gnueabihf@npm:13.2.4"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-linux-arm64-gnu@npm:12.3.4"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-arm64-gnu@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-linux-arm64-gnu@npm:13.2.3"
@@ -8039,20 +8028,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-linux-arm64-gnu@npm:13.2.4-canary.5"
+"@next/swc-linux-arm64-gnu@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-linux-arm64-gnu@npm:13.2.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-linux-arm64-musl@npm:12.3.4"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-arm64-musl@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-linux-arm64-musl@npm:13.2.3"
@@ -8060,20 +8042,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-linux-arm64-musl@npm:13.2.4-canary.5"
+"@next/swc-linux-arm64-musl@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-linux-arm64-musl@npm:13.2.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-linux-x64-gnu@npm:12.3.4"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-x64-gnu@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-linux-x64-gnu@npm:13.2.3"
@@ -8081,20 +8056,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-linux-x64-gnu@npm:13.2.4-canary.5"
+"@next/swc-linux-x64-gnu@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-linux-x64-gnu@npm:13.2.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-linux-x64-musl@npm:12.3.4"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-x64-musl@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-linux-x64-musl@npm:13.2.3"
@@ -8102,20 +8070,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-linux-x64-musl@npm:13.2.4-canary.5"
+"@next/swc-linux-x64-musl@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-linux-x64-musl@npm:13.2.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-win32-arm64-msvc@npm:12.3.4"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-arm64-msvc@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-win32-arm64-msvc@npm:13.2.3"
@@ -8123,20 +8084,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-win32-arm64-msvc@npm:13.2.4-canary.5"
+"@next/swc-win32-arm64-msvc@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-win32-arm64-msvc@npm:13.2.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-win32-ia32-msvc@npm:12.3.4"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-ia32-msvc@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-win32-ia32-msvc@npm:13.2.3"
@@ -8144,20 +8098,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-win32-ia32-msvc@npm:13.2.4-canary.5"
+"@next/swc-win32-ia32-msvc@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-win32-ia32-msvc@npm:13.2.4"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:12.3.4":
-  version: 12.3.4
-  resolution: "@next/swc-win32-x64-msvc@npm:12.3.4"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-x64-msvc@npm:13.2.3":
   version: 13.2.3
   resolution: "@next/swc-win32-x64-msvc@npm:13.2.3"
@@ -8165,9 +8112,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "@next/swc-win32-x64-msvc@npm:13.2.4-canary.5"
+"@next/swc-win32-x64-msvc@npm:13.2.4":
+  version: 13.2.4
+  resolution: "@next/swc-win32-x64-msvc@npm:13.2.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -8421,6 +8368,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@prisma/client@npm:^4.8.1":
+  version: 4.12.0
+  resolution: "@prisma/client@npm:4.12.0"
+  dependencies:
+    "@prisma/engines-version": 4.12.0-67.659ef412370fa3b41cd7bf6e94587c1dfb7f67e7
+  peerDependencies:
+    prisma: "*"
+  peerDependenciesMeta:
+    prisma:
+      optional: true
+  checksum: bbd17500ee218a71e765a75b649c56bc0da1903e63d69d716b6a0e6995c8e1cc5265423ba1518a789c3e71b91d93e7937180db2d107e426bd4ad2f51998240f0
+  languageName: node
+  linkType: hard
+
 "@prisma/debug@npm:3.8.1":
   version: 3.8.1
   resolution: "@prisma/debug@npm:3.8.1"
@@ -8432,14 +8393,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prisma/debug@npm:4.12.0":
-  version: 4.12.0
-  resolution: "@prisma/debug@npm:4.12.0"
+"@prisma/debug@npm:4.11.0":
+  version: 4.11.0
+  resolution: "@prisma/debug@npm:4.11.0"
   dependencies:
     "@types/debug": 4.1.7
     debug: 4.3.4
     strip-ansi: 6.0.1
-  checksum: 0ae182634f4a25231ff946768e1da1f694b5141d21c92cb2a142580de30d67ebd1595f8575a4c63356740e415d5d64829449a4710d8421e7147016ea0acb2643
+  checksum: 170adb225d6e8e0e0df26d441d550607c7fecb97969b47ca19264d65636564c774ba60b9cefab196bb86d358cdd06a289e2ad8d3f70201cb3becb79547343bf5
   languageName: node
   linkType: hard
 
@@ -8450,6 +8411,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@prisma/engines-version@npm:4.12.0-67.659ef412370fa3b41cd7bf6e94587c1dfb7f67e7":
+  version: 4.12.0-67.659ef412370fa3b41cd7bf6e94587c1dfb7f67e7
+  resolution: "@prisma/engines-version@npm:4.12.0-67.659ef412370fa3b41cd7bf6e94587c1dfb7f67e7"
+  checksum: 54615d6982db9c50eed6132ad7ab3f32ef93f64d36b7f932b0d6109cd54028ea459293833e48b849a5dd968d934bb3cfb275b9a9172934032f95355d6f663dcf
+  languageName: node
+  linkType: hard
+
 "@prisma/engines@npm:4.11.0":
   version: 4.11.0
   resolution: "@prisma/engines@npm:4.11.0"
@@ -8457,15 +8425,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prisma/generator-helper@npm:^4.0.0":
+"@prisma/engines@npm:4.12.0":
   version: 4.12.0
-  resolution: "@prisma/generator-helper@npm:4.12.0"
+  resolution: "@prisma/engines@npm:4.12.0"
+  checksum: 5d226a2c86bee5bc6fa34910ec9ba9a68a1c0248977d0da47964372edcfe773ee6c4bb00e244258f535570f018d883f0ab9e2677cf06471869bb8857f79880f6
+  languageName: node
+  linkType: hard
+
+"@prisma/generator-helper@npm:^4.0.0":
+  version: 4.11.0
+  resolution: "@prisma/generator-helper@npm:4.11.0"
   dependencies:
-    "@prisma/debug": 4.12.0
+    "@prisma/debug": 4.11.0
     "@types/cross-spawn": 6.0.2
     chalk: 4.1.2
     cross-spawn: 7.0.3
-  checksum: b844fcf736c922ce39e6aa1081b7c133b921ceb5d272f51296cf7afc3128ca6085ef1594ce63045ef47a462c56e5e37b9a1094a36d5dd484f77017d6f227641f
+  checksum: 4d8cb919893cc22a743e625c7d077e3cbd67e4541500025d253dfd6df2452d294d05bbd0a0599007c562796badba92d57191ecfb980e3c29c906ba0038d37faf
   languageName: node
   linkType: hard
 
@@ -9891,18 +9866,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/browser@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/browser@npm:6.19.7"
-  dependencies:
-    "@sentry/core": 6.19.7
-    "@sentry/types": 6.19.7
-    "@sentry/utils": 6.19.7
-    tslib: ^1.9.3
-  checksum: 071d00c76c2d0384580474c634c58c6196bbd1a3cf510da1309bd1565c57df7422fca8ceb717db189fa557f2c711a21664ee1ab935dfd9869faf416d388e6f78
-  languageName: node
-  linkType: hard
-
 "@sentry/browser@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/browser@npm:7.20.0"
@@ -9915,22 +9878,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/cli@npm:^1.73.0":
-  version: 1.75.0
-  resolution: "@sentry/cli@npm:1.75.0"
-  dependencies:
-    https-proxy-agent: ^5.0.0
-    mkdirp: ^0.5.5
-    node-fetch: ^2.6.7
-    progress: ^2.0.3
-    proxy-from-env: ^1.1.0
-    which: ^2.0.2
-  bin:
-    sentry-cli: bin/sentry-cli
-  checksum: d5b130bb45bc96d0f738801343455e6a113d1cc9e16166f0d6bfa022809b557159f010677d2dc05adcdfa7f8ad23c401182b6daef720fa2a0bad82fa6e3b2148
-  languageName: node
-  linkType: hard
-
 "@sentry/cli@npm:^1.74.6":
   version: 1.74.6
   resolution: "@sentry/cli@npm:1.74.6"
@@ -9948,19 +9895,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/core@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/core@npm:6.19.7"
-  dependencies:
-    "@sentry/hub": 6.19.7
-    "@sentry/minimal": 6.19.7
-    "@sentry/types": 6.19.7
-    "@sentry/utils": 6.19.7
-    tslib: ^1.9.3
-  checksum: d212e8ef07114549de4a93b81f8bfa217ca1550ca7a5eeaa611e5629faef78ff72663ce561ffa2cff48f3dc556745ef65177044f9965cdd3cbccf617cf3bf675
-  languageName: node
-  linkType: hard
-
 "@sentry/core@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/core@npm:7.20.0"
@@ -9972,29 +9906,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/hub@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/hub@npm:6.19.7"
-  dependencies:
-    "@sentry/types": 6.19.7
-    "@sentry/utils": 6.19.7
-    tslib: ^1.9.3
-  checksum: 10bb1c5cba1b0f1e27a3dd0a186c22f94aeaf11c4662890ab07b2774f46f46af78d61e3ba71d76edc750a7b45af86edd032f35efecdb4efa2eaf551080ccdcb1
-  languageName: node
-  linkType: hard
-
-"@sentry/integrations@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/integrations@npm:6.19.7"
-  dependencies:
-    "@sentry/types": 6.19.7
-    "@sentry/utils": 6.19.7
-    localforage: ^1.8.1
-    tslib: ^1.9.3
-  checksum: 6ea22ef8d518e6ade96ad00c07f5346c8316264ae6ec353c299e03d1d3cf4b226f639bde07dd5d1da28feaa031338e75df25fc60a083a24d847f4cfde4dbc8e9
-  languageName: node
-  linkType: hard
-
 "@sentry/integrations@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/integrations@npm:7.20.0"
@@ -10007,41 +9918,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/minimal@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/minimal@npm:6.19.7"
-  dependencies:
-    "@sentry/hub": 6.19.7
-    "@sentry/types": 6.19.7
-    tslib: ^1.9.3
-  checksum: 9153ac426ee056fc34c5be898f83d74ec08f559d69f544c5944ec05e584b62ed356b92d1a9b08993a7022ad42b5661c3d72881221adc19bee5fc1af3ad3864a8
-  languageName: node
-  linkType: hard
-
-"@sentry/nextjs@npm:^6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/nextjs@npm:6.19.7"
-  dependencies:
-    "@sentry/core": 6.19.7
-    "@sentry/hub": 6.19.7
-    "@sentry/integrations": 6.19.7
-    "@sentry/node": 6.19.7
-    "@sentry/react": 6.19.7
-    "@sentry/tracing": 6.19.7
-    "@sentry/utils": 6.19.7
-    "@sentry/webpack-plugin": 1.18.8
-    tslib: ^1.9.3
-  peerDependencies:
-    next: ^10.0.8 || ^11.0 || ^12.0
-    react: 15.x || 16.x || 17.x || 18.x
-    webpack: ">= 4.0.0"
-  peerDependenciesMeta:
-    webpack:
-      optional: true
-  checksum: f45228d9dd94457db5febca1e7f79b0689000cecc0beb8155724ea69657f871fc0116a3c884be0167196a730856aaf862db7869ef14e16183091ae0607d3a78a
-  languageName: node
-  linkType: hard
-
 "@sentry/nextjs@npm:^7.20.0":
   version: 7.20.0
   resolution: "@sentry/nextjs@npm:7.20.0"
@@ -10070,22 +9946,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/node@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/node@npm:6.19.7"
-  dependencies:
-    "@sentry/core": 6.19.7
-    "@sentry/hub": 6.19.7
-    "@sentry/types": 6.19.7
-    "@sentry/utils": 6.19.7
-    cookie: ^0.4.1
-    https-proxy-agent: ^5.0.0
-    lru_map: ^0.3.3
-    tslib: ^1.9.3
-  checksum: 2293b0d1d1f9fac3a451eb94f820bc27721c8edddd1f373064666ddd6272f0a4c70dbe58c6c4b3d3ccaf4578aab8f466d71ee69f6f6ff93521bbb02dfe829ce5
-  languageName: node
-  linkType: hard
-
 "@sentry/node@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/node@npm:7.20.0"
@@ -10101,22 +9961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/react@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/react@npm:6.19.7"
-  dependencies:
-    "@sentry/browser": 6.19.7
-    "@sentry/minimal": 6.19.7
-    "@sentry/types": 6.19.7
-    "@sentry/utils": 6.19.7
-    hoist-non-react-statics: ^3.3.2
-    tslib: ^1.9.3
-  peerDependencies:
-    react: 15.x || 16.x || 17.x || 18.x
-  checksum: f49b74c617e3d5094109417a4ab957d4304ec5c3c6d7208c93fe484f263c70c9656259471ae0367b75a303466d7715285ae9ac4876927d6bc285dab4d8e1591d
-  languageName: node
-  linkType: hard
-
 "@sentry/react@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/react@npm:7.20.0"
@@ -10132,19 +9976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/tracing@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/tracing@npm:6.19.7"
-  dependencies:
-    "@sentry/hub": 6.19.7
-    "@sentry/minimal": 6.19.7
-    "@sentry/types": 6.19.7
-    "@sentry/utils": 6.19.7
-    tslib: ^1.9.3
-  checksum: 26e7bf435f0478356d95fab50fe4acd2cf449bfdfd457996111aeedd082f6c76f0592abd0c5f5dcfe2b582d3fd7988ffef07787e7ecc7f5d228278731ce6264e
-  languageName: node
-  linkType: hard
-
 "@sentry/tracing@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/tracing@npm:7.20.0"
@@ -10157,13 +9988,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/types@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/types@npm:6.19.7"
-  checksum: f46ef74a33376ad6ea9b128115515c58eb9369d89293c60aa67abca26b5d5d519aa4d0a736db56ae0d75ffd816643d62187018298523cbc2e6c2fb3a6b2a9035
-  languageName: node
-  linkType: hard
-
 "@sentry/types@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/types@npm:7.20.0"
@@ -10171,16 +9995,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/utils@npm:6.19.7":
-  version: 6.19.7
-  resolution: "@sentry/utils@npm:6.19.7"
-  dependencies:
-    "@sentry/types": 6.19.7
-    tslib: ^1.9.3
-  checksum: a000223b9c646c64e3565e79cace1eeb75114342b768367c4dddd646476c215eb1bddfb70c63f05e2352d3bce2d7d415344e4757a001605d0e01ac74da5dd306
-  languageName: node
-  linkType: hard
-
 "@sentry/utils@npm:7.20.0":
   version: 7.20.0
   resolution: "@sentry/utils@npm:7.20.0"
@@ -10191,15 +10005,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sentry/webpack-plugin@npm:1.18.8":
-  version: 1.18.8
-  resolution: "@sentry/webpack-plugin@npm:1.18.8"
-  dependencies:
-    "@sentry/cli": ^1.73.0
-  checksum: e159ee1e4b486a6d602bcf04e08ce4f167c9148aa4b612f6871f81954fba0cf607297a77bcda22f6f882266ac715ce8cb7be55858eaebc9fdbb85737ae92eb04
-  languageName: node
-  linkType: hard
-
 "@sentry/webpack-plugin@npm:1.20.0":
   version: 1.20.0
   resolution: "@sentry/webpack-plugin@npm:1.20.0"
@@ -10222,29 +10027,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sideway/address@npm:^4.1.3":
-  version: 4.1.4
-  resolution: "@sideway/address@npm:4.1.4"
-  dependencies:
-    "@hapi/hoek": ^9.0.0
-  checksum: b9fca2a93ac2c975ba12e0a6d97853832fb1f4fb02393015e012b47fa916a75ca95102d77214b2a29a2784740df2407951af8c5dde054824c65577fd293c4cdb
-  languageName: node
-  linkType: hard
-
-"@sideway/formula@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@sideway/formula@npm:3.0.1"
-  checksum: e4beeebc9dbe2ff4ef0def15cec0165e00d1612e3d7cea0bc9ce5175c3263fc2c818b679bd558957f49400ee7be9d4e5ac90487e1625b4932e15c4aa7919c57a
-  languageName: node
-  linkType: hard
-
-"@sideway/pinpoint@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@sideway/pinpoint@npm:2.0.0"
-  checksum: 0f4491e5897fcf5bf02c46f5c359c56a314e90ba243f42f0c100437935daa2488f20482f0f77186bd6bf43345095a95d8143ecf8b1f4d876a7bc0806aba9c3d2
-  languageName: node
-  linkType: hard
-
 "@sinclair/typebox@npm:^0.24.1":
   version: 0.24.19
   resolution: "@sinclair/typebox@npm:0.24.19"
@@ -12025,15 +11807,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.4.11":
-  version: 0.4.11
-  resolution: "@swc/helpers@npm:0.4.11"
-  dependencies:
-    tslib: ^2.4.0
-  checksum: 736857d524b41a8a4db81094e9b027f554004e0fa3e86325d85bdb38f7e6459ce022db079edb6c61ba0f46fe8583b3e663e95f7acbd13e51b8da6c34e45bba2e
-  languageName: node
-  linkType: hard
-
 "@swc/helpers@npm:0.4.14":
   version: 0.4.14
   resolution: "@swc/helpers@npm:0.4.14"
@@ -17810,7 +17583,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^6.2.1":
+"commander@npm:^6.2.0, commander@npm:^6.2.1":
   version: 6.2.1
   resolution: "commander@npm:6.2.1"
   checksum: d7090410c0de6bc5c67d3ca41c41760d6d268f3c799e530aafb73b7437d1826bbf0d2a3edac33f8b57cc9887b4a986dce307fa5557e109be40eadb7c43b21742
@@ -17933,26 +17706,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concurrently@npm:^7.6.0":
-  version: 7.6.0
-  resolution: "concurrently@npm:7.6.0"
-  dependencies:
-    chalk: ^4.1.0
-    date-fns: ^2.29.1
-    lodash: ^4.17.21
-    rxjs: ^7.0.0
-    shell-quote: ^1.7.3
-    spawn-command: ^0.0.2-1
-    supports-color: ^8.1.0
-    tree-kill: ^1.2.2
-    yargs: ^17.3.1
-  bin:
-    conc: dist/bin/concurrently.js
-    concurrently: dist/bin/concurrently.js
-  checksum: f705c9a7960f1b16559ca64958043faeeef6385c0bf30a03d1375e15ab2d96dba4f8166f1bbbb1c85e8da35ca0ce3c353875d71dff2aa132b2357bb533b3332e
-  languageName: node
-  linkType: hard
-
 "console-browserify@npm:^1.1.0":
   version: 1.2.0
   resolution: "console-browserify@npm:1.2.0"
@@ -18731,7 +18484,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"date-fns@npm:^2.28.0, date-fns@npm:^2.29.1, date-fns@npm:^2.29.3":
+"date-fns@npm:^2.28.0, date-fns@npm:^2.29.3":
   version: 2.29.3
   resolution: "date-fns@npm:2.29.3"
   checksum: e01cf5b62af04e05dfff921bb9c9933310ed0e1ae9a81eb8653452e64dc841acf7f6e01e1a5ae5644d0337e9a7f936175fd2cb6819dc122fdd9c5e86c56be484
@@ -20823,6 +20576,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-visitor-keys@npm:^3.4.0":
+  version: 3.4.0
+  resolution: "eslint-visitor-keys@npm:3.4.0"
+  checksum: 33159169462d3989321a1ec1e9aaaf6a24cc403d5d347e9886d1b5bfe18ffa1be73bdc6203143a28a606b142b1af49787f33cff0d6d0813eb5f2e8d2e1a6043c
+  languageName: node
+  linkType: hard
+
 "eslint@npm:8.4.1":
   version: 8.4.1
   resolution: "eslint@npm:8.4.1"
@@ -20871,6 +20631,56 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint@npm:^8.22.0":
+  version: 8.37.0
+  resolution: "eslint@npm:8.37.0"
+  dependencies:
+    "@eslint-community/eslint-utils": ^4.2.0
+    "@eslint-community/regexpp": ^4.4.0
+    "@eslint/eslintrc": ^2.0.2
+    "@eslint/js": 8.37.0
+    "@humanwhocodes/config-array": ^0.11.8
+    "@humanwhocodes/module-importer": ^1.0.1
+    "@nodelib/fs.walk": ^1.2.8
+    ajv: ^6.10.0
+    chalk: ^4.0.0
+    cross-spawn: ^7.0.2
+    debug: ^4.3.2
+    doctrine: ^3.0.0
+    escape-string-regexp: ^4.0.0
+    eslint-scope: ^7.1.1
+    eslint-visitor-keys: ^3.4.0
+    espree: ^9.5.1
+    esquery: ^1.4.2
+    esutils: ^2.0.2
+    fast-deep-equal: ^3.1.3
+    file-entry-cache: ^6.0.1
+    find-up: ^5.0.0
+    glob-parent: ^6.0.2
+    globals: ^13.19.0
+    grapheme-splitter: ^1.0.4
+    ignore: ^5.2.0
+    import-fresh: ^3.0.0
+    imurmurhash: ^0.1.4
+    is-glob: ^4.0.0
+    is-path-inside: ^3.0.3
+    js-sdsl: ^4.1.4
+    js-yaml: ^4.1.0
+    json-stable-stringify-without-jsonify: ^1.0.1
+    levn: ^0.4.1
+    lodash.merge: ^4.6.2
+    minimatch: ^3.1.2
+    natural-compare: ^1.4.0
+    optionator: ^0.9.1
+    strip-ansi: ^6.0.1
+    strip-json-comments: ^3.1.0
+    text-table: ^0.2.0
+  bin:
+    eslint: bin/eslint.js
+  checksum: 80f3d5cdce2d671f4794e392d234a78d039c347673defb0596268bd481e8f30a53d93c01ff4f66a546c87d97ab4122c0e9cafe1371f87cb03cee6b7d5aa97595
+  languageName: node
+  linkType: hard
+
 "eslint@npm:^8.34.0":
   version: 8.34.0
   resolution: "eslint@npm:8.34.0"
@@ -20964,6 +20774,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"espree@npm:^9.5.1":
+  version: 9.5.1
+  resolution: "espree@npm:9.5.1"
+  dependencies:
+    acorn: ^8.8.0
+    acorn-jsx: ^5.3.2
+    eslint-visitor-keys: ^3.4.0
+  checksum: cdf6e43540433d917c4f2ee087c6e987b2063baa85a1d9cdaf51533d78275ebd5910c42154e7baf8e3e89804b386da0a2f7fad2264d8f04420e7506bf87b3b88
+  languageName: node
+  linkType: hard
+
 "esprima@npm:^4.0.0, esprima@npm:^4.0.1":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
@@ -20983,6 +20804,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esquery@npm:^1.4.2":
+  version: 1.5.0
+  resolution: "esquery@npm:1.5.0"
+  dependencies:
+    estraverse: ^5.1.0
+  checksum: aefb0d2596c230118656cd4ec7532d447333a410a48834d80ea648b1e7b5c9bc9ed8b5e33a89cb04e487b60d622f44cf5713bf4abed7c97343edefdc84a35900
+  languageName: node
+  linkType: hard
+
 "esrecurse@npm:^4.1.0, esrecurse@npm:^4.3.0":
   version: 4.3.0
   resolution: "esrecurse@npm:4.3.0"
@@ -22935,9 +22765,9 @@ __metadata:
   linkType: hard
 
 "github-buttons@npm:^2.22.0":
-  version: 2.26.0
-  resolution: "github-buttons@npm:2.26.0"
-  checksum: e06e8dd23195201250ba4455e3044f75306fbe76400a3978014a5d7490a24e5e360420f50912e3e00ee5a6fa2ad76afe24ec62f9144d529059bf3c1226498f2a
+  version: 2.24.0
+  resolution: "github-buttons@npm:2.24.0"
+  checksum: 3bf27f9078180e36cfc87e214e788898da603d606c871deedc40b7edef4abf3f659a6cff65bd6990c07f59f473468de92174a04a91c42ca95b868d5da1c4d287
   languageName: node
   linkType: hard
 
@@ -23168,7 +22998,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^13.1.2, globby@npm:^13.1.3":
+"globby@npm:^13.1.2":
   version: 13.1.3
   resolution: "globby@npm:13.1.3"
   dependencies:
@@ -26213,19 +26043,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"joi@npm:^17.7.0":
-  version: 17.9.1
-  resolution: "joi@npm:17.9.1"
-  dependencies:
-    "@hapi/hoek": ^9.0.0
-    "@hapi/topo": ^5.0.0
-    "@sideway/address": ^4.1.3
-    "@sideway/formula": ^3.0.1
-    "@sideway/pinpoint": ^2.0.0
-  checksum: 055df3841e00d7ed065ef1cc3330cf69097ab2ffec3083d8b1d6edfd2e25504bf2983f5249d6f0459bcad99fe21bb0c9f6f1cc03569713af27cd5eb00ee7bb7d
-  languageName: node
-  linkType: hard
-
 "jose@npm:4.12.0":
   version: 4.12.0
   resolution: "jose@npm:4.12.0"
@@ -27557,15 +27374,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react@npm:^0.125.0":
-  version: 0.125.0
-  resolution: "lucide-react@npm:0.125.0"
-  peerDependencies:
-    react: ^16.5.1 || ^17.0.0 || ^18.0.0
-  checksum: 6d86330fd4316a42624d537cc07adc3c51c18a699a02ef3abbd221c3140ae5ac5685396e1f5cb20f5f5ba80fa100523a5a6811c22a51bd13bbfdf65546cfffdf
-  languageName: node
-  linkType: hard
-
 "luxon@npm:^1.26.0":
   version: 1.28.0
   resolution: "luxon@npm:1.28.0"
@@ -28287,6 +28095,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micro@npm:^9.4.1":
+  version: 9.4.1
+  resolution: "micro@npm:9.4.1"
+  dependencies:
+    arg: 4.1.0
+    content-type: 1.0.4
+    raw-body: 2.4.1
+  bin:
+    micro: bin/micro.js
+  checksum: 92eae8a68bd1883862d1bdb3a1d0340106a6ddb357dcbe7aaa095dd6947497ff1dd240db86195ab9aab8843f9ac3974accc76d767e9e58f95744ca558dd2d672
+  languageName: node
+  linkType: hard
+
 "microevent.ts@npm:~0.1.1":
   version: 0.1.1
   resolution: "microevent.ts@npm:0.1.1"
@@ -28881,13 +28702,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.7":
-  version: 1.2.8
-  resolution: "minimist@npm:1.2.8"
-  checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0
-  languageName: node
-  linkType: hard
-
 "minipass-collect@npm:^1.0.2":
   version: 1.0.2
   resolution: "minipass-collect@npm:1.0.2"
@@ -29482,7 +29296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-auth@npm:^4.20.1":
+"next-auth@npm:^4.10.3, next-auth@npm:^4.20.1":
   version: 4.20.1
   resolution: "next-auth@npm:4.20.1"
   dependencies:
@@ -29507,17 +29321,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-axiom@npm:^0.10.0":
-  version: 0.10.0
-  resolution: "next-axiom@npm:0.10.0"
-  dependencies:
-    whatwg-fetch: ^3.6.2
-  peerDependencies:
-    next: ^12.1.4
-  checksum: 57aea4edbdab1a4da59eb16644e850a082a23657128f1f953a2b3601b09fa4558090d42b616f8a3e6022c0deef0d95937321f373caa9ca591178dd8445528921
-  languageName: node
-  linkType: hard
-
 "next-axiom@npm:^0.16.0":
   version: 0.16.0
   resolution: "next-axiom@npm:0.16.0"
@@ -29615,6 +29418,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-transpile-modules@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "next-transpile-modules@npm:10.0.0"
+  dependencies:
+    enhanced-resolve: ^5.10.0
+  checksum: 3300fc7081f63b2c9487588db7cbe718f209dfd2111adec22d9c8af0e3c8ade2d95fd45f91e045546d78d98cafc78a49431de9a623360d33831b5e694bf007c9
+  languageName: node
+  linkType: hard
+
 "next-transpile-modules@npm:^8.0.0":
   version: 8.0.0
   resolution: "next-transpile-modules@npm:8.0.0"
@@ -29625,16 +29437,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-transpile-modules@npm:^9.0.0":
-  version: 9.1.0
-  resolution: "next-transpile-modules@npm:9.1.0"
-  dependencies:
-    enhanced-resolve: ^5.10.0
-    escalade: ^3.1.1
-  checksum: 8cc46196db3c2d2063fb29fe5b4d03c21065ab08130085b24d61e4ed512d99c12083d28179771cf02f70f8bf5970db0781a228aacf6cc61662dbdcabaddfc472
-  languageName: node
-  linkType: hard
-
 "next-validations@npm:^0.2.0":
   version: 0.2.1
   resolution: "next-validations@npm:0.2.1"
@@ -29644,24 +29446,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:13.2.4-canary.5":
-  version: 13.2.4-canary.5
-  resolution: "next@npm:13.2.4-canary.5"
+"next@npm:^13.1.1":
+  version: 13.2.4
+  resolution: "next@npm:13.2.4"
   dependencies:
-    "@next/env": 13.2.4-canary.5
-    "@next/swc-android-arm-eabi": 13.2.4-canary.5
-    "@next/swc-android-arm64": 13.2.4-canary.5
-    "@next/swc-darwin-arm64": 13.2.4-canary.5
-    "@next/swc-darwin-x64": 13.2.4-canary.5
-    "@next/swc-freebsd-x64": 13.2.4-canary.5
-    "@next/swc-linux-arm-gnueabihf": 13.2.4-canary.5
-    "@next/swc-linux-arm64-gnu": 13.2.4-canary.5
-    "@next/swc-linux-arm64-musl": 13.2.4-canary.5
-    "@next/swc-linux-x64-gnu": 13.2.4-canary.5
-    "@next/swc-linux-x64-musl": 13.2.4-canary.5
-    "@next/swc-win32-arm64-msvc": 13.2.4-canary.5
-    "@next/swc-win32-ia32-msvc": 13.2.4-canary.5
-    "@next/swc-win32-x64-msvc": 13.2.4-canary.5
+    "@next/env": 13.2.4
+    "@next/swc-android-arm-eabi": 13.2.4
+    "@next/swc-android-arm64": 13.2.4
+    "@next/swc-darwin-arm64": 13.2.4
+    "@next/swc-darwin-x64": 13.2.4
+    "@next/swc-freebsd-x64": 13.2.4
+    "@next/swc-linux-arm-gnueabihf": 13.2.4
+    "@next/swc-linux-arm64-gnu": 13.2.4
+    "@next/swc-linux-arm64-musl": 13.2.4
+    "@next/swc-linux-x64-gnu": 13.2.4
+    "@next/swc-linux-x64-musl": 13.2.4
+    "@next/swc-win32-arm64-msvc": 13.2.4
+    "@next/swc-win32-ia32-msvc": 13.2.4
+    "@next/swc-win32-x64-msvc": 13.2.4
     "@swc/helpers": 0.4.14
     caniuse-lite: ^1.0.30001406
     postcss: 8.4.14
@@ -29711,76 +29513,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 47616f1ebbf0e716ca67313d247d56f646e1f663dcfc99125a0e882ed74a6ebc2c776a7e05438b4e928d38d8dae42933c5b314dfb8e4c0a566edd0e26647335a
-  languageName: node
-  linkType: hard
-
-"next@npm:^12.2.5":
-  version: 12.3.4
-  resolution: "next@npm:12.3.4"
-  dependencies:
-    "@next/env": 12.3.4
-    "@next/swc-android-arm-eabi": 12.3.4
-    "@next/swc-android-arm64": 12.3.4
-    "@next/swc-darwin-arm64": 12.3.4
-    "@next/swc-darwin-x64": 12.3.4
-    "@next/swc-freebsd-x64": 12.3.4
-    "@next/swc-linux-arm-gnueabihf": 12.3.4
-    "@next/swc-linux-arm64-gnu": 12.3.4
-    "@next/swc-linux-arm64-musl": 12.3.4
-    "@next/swc-linux-x64-gnu": 12.3.4
-    "@next/swc-linux-x64-musl": 12.3.4
-    "@next/swc-win32-arm64-msvc": 12.3.4
-    "@next/swc-win32-ia32-msvc": 12.3.4
-    "@next/swc-win32-x64-msvc": 12.3.4
-    "@swc/helpers": 0.4.11
-    caniuse-lite: ^1.0.30001406
-    postcss: 8.4.14
-    styled-jsx: 5.0.7
-    use-sync-external-store: 1.2.0
-  peerDependencies:
-    fibers: ">= 3.1.0"
-    node-sass: ^6.0.0 || ^7.0.0
-    react: ^17.0.2 || ^18.0.0-0
-    react-dom: ^17.0.2 || ^18.0.0-0
-    sass: ^1.3.0
-  dependenciesMeta:
-    "@next/swc-android-arm-eabi":
-      optional: true
-    "@next/swc-android-arm64":
-      optional: true
-    "@next/swc-darwin-arm64":
-      optional: true
-    "@next/swc-darwin-x64":
-      optional: true
-    "@next/swc-freebsd-x64":
-      optional: true
-    "@next/swc-linux-arm-gnueabihf":
-      optional: true
-    "@next/swc-linux-arm64-gnu":
-      optional: true
-    "@next/swc-linux-arm64-musl":
-      optional: true
-    "@next/swc-linux-x64-gnu":
-      optional: true
-    "@next/swc-linux-x64-musl":
-      optional: true
-    "@next/swc-win32-arm64-msvc":
-      optional: true
-    "@next/swc-win32-ia32-msvc":
-      optional: true
-    "@next/swc-win32-x64-msvc":
-      optional: true
-  peerDependenciesMeta:
-    fibers:
-      optional: true
-    node-sass:
-      optional: true
-    sass:
-      optional: true
-  bin:
-    next: dist/bin/next
-  checksum: d96fc4f5bcd5a630d74111519f4820dcbd75dddf16c6d00d2167bd3cb8d74965d46d83c8e5ec301bf999013c7d96f1bfff9424f0221317d68b594c4d01f5825e
+  checksum: 8531dee41b60181b582f5ee80858907b102f083ef8808ff9352d589dd39e6b3a96f7a11b3776a03eef3a28430cff768336fa2e3ff2c6f8fcd699fbc891749051
   languageName: node
   linkType: hard
 
@@ -31599,26 +31332,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.32.2":
-  version: 1.32.2
-  resolution: "playwright-core@npm:1.32.2"
-  bin:
-    playwright: cli.js
-  checksum: ff000cbf280e5d558fe70fd3edf14910a2e86ec68b04e28327176268345be7b3f88a5d22d78e8dae677dd633dce6cd493237df199773b55312f2ae1ab85d711f
-  languageName: node
-  linkType: hard
-
-"playwright@npm:^1.31.2":
-  version: 1.32.2
-  resolution: "playwright@npm:1.32.2"
-  dependencies:
-    playwright-core: 1.32.2
-  bin:
-    playwright: cli.js
-  checksum: 36967299a5c4c02830bcb7fb94b96d6c6a7a2d7e749feb924509e89b1fdc34f8ee2218cfaf75e5f32572663568b468ad28fdc170bced41869d5ed69f9a7ff384
-  languageName: node
-  linkType: hard
-
 "pngjs@npm:^3.0.0, pngjs@npm:^3.3.0, pngjs@npm:^3.3.3":
   version: 3.4.0
   resolution: "pngjs@npm:3.4.0"
@@ -32204,6 +31917,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prisma@npm:^4.8.1":
+  version: 4.12.0
+  resolution: "prisma@npm:4.12.0"
+  dependencies:
+    "@prisma/engines": 4.12.0
+  bin:
+    prisma: build/index.js
+    prisma2: build/index.js
+  checksum: 826b90901391eead0aa2e1ab4539474c308f8a956b480e87594b241bfaba423ebd781b8082fc329f4e7e780f3a7162a09ac61c367d3f43382e93d506e4a66c7c
+  languageName: node
+  linkType: hard
+
 "prismjs@npm:^1.27.0":
   version: 1.28.0
   resolution: "prismjs@npm:1.28.0"
@@ -33042,6 +32767,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-hook-form@npm:^7.34.2":
+  version: 7.43.8
+  resolution: "react-hook-form@npm:7.43.8"
+  peerDependencies:
+    react: ^16.8.0 || ^17 || ^18
+  checksum: 1042b68950e1756dd907e7eb904c6efdf04f126a48797b25e8793705d930f7bbff2cc07f0ec7ea4c52272e808a359ae157742c551defa3b3fd0952ff414bd3e3
+  languageName: node
+  linkType: hard
+
 "react-hook-form@npm:^7.43.3":
   version: 7.43.3
   resolution: "react-hook-form@npm:7.43.3"
@@ -33205,15 +32939,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-live-chat-loader@npm:^2.8.1":
-  version: 2.8.1
-  resolution: "react-live-chat-loader@npm:2.8.1"
-  peerDependencies:
-    react: ^16.14.0 || ^17.0.0 || ^18.0.0
-  checksum: 784648dc5c8e56ad11517433b2685c4e562efde6116d03444d2e8a0f87076860712800551698f82e980939ed3ac305947b78a514187ae2d5a1a0fc0a659c5c22
-  languageName: node
-  linkType: hard
-
 "react-merge-refs@npm:1.1.0, react-merge-refs@npm:^1.0.0":
   version: 1.1.0
   resolution: "react-merge-refs@npm:1.1.0"
@@ -34190,7 +33915,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark@npm:^14.0.2":
+"remark@npm:^14.0.1, remark@npm:^14.0.2":
   version: 14.0.2
   resolution: "remark@npm:14.0.2"
   dependencies:
@@ -34728,15 +34453,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:^7.0.0, rxjs@npm:^7.8.0":
-  version: 7.8.0
-  resolution: "rxjs@npm:7.8.0"
-  dependencies:
-    tslib: ^2.1.0
-  checksum: 61b4d4fd323c1043d8d6ceb91f24183b28bcf5def4f01ca111511d5c6b66755bc5578587fe714ef5d67cf4c9f2e26f4490d4e1d8cabf9bd5967687835e9866a2
-  languageName: node
-  linkType: hard
-
 "rxjs@npm:^7.5.5":
   version: 7.5.5
   resolution: "rxjs@npm:7.5.5"
@@ -35379,13 +35095,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shell-quote@npm:^1.7.3":
-  version: 1.8.0
-  resolution: "shell-quote@npm:1.8.0"
-  checksum: 6ef7c5e308b9c77eedded882653a132214fa98b4a1512bb507588cf6cd2fc78bfee73e945d0c3211af028a1eabe09c6a19b96edd8977dc149810797e93809749
-  languageName: node
-  linkType: hard
-
 "short-uuid@npm:^4.2.0":
   version: 4.2.0
   resolution: "short-uuid@npm:4.2.0"
@@ -35722,13 +35431,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"spawn-command@npm:^0.0.2-1":
-  version: 0.0.2
-  resolution: "spawn-command@npm:0.0.2"
-  checksum: e35c5d28177b4d461d33c88cc11f6f3a5079e2b132c11e1746453bbb7a0c0b8a634f07541a2a234fa4758239d88203b758def509161b651e81958894c0b4b64b
-  languageName: node
-  linkType: hard
-
 "spdx-correct@npm:^3.0.0":
   version: 3.1.1
   resolution: "spdx-correct@npm:3.1.1"
@@ -36558,20 +36260,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-jsx@npm:5.0.7":
-  version: 5.0.7
-  resolution: "styled-jsx@npm:5.0.7"
-  peerDependencies:
-    react: ">= 16.8.0 || 17.x.x || ^18.0.0-0"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    babel-plugin-macros:
-      optional: true
-  checksum: 61959993915f4b1662a682dbbefb3512de9399cf6901969bcadd26ba5441d2b5ca5c1021b233bbd573da2541b41efb45d56c6f618dbc8d88a381ebc62461fefe
-  languageName: node
-  linkType: hard
-
 "styled-jsx@npm:5.1.1":
   version: 5.1.1
   resolution: "styled-jsx@npm:5.1.1"
@@ -36681,7 +36369,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^8.0.0, supports-color@npm:^8.1.0":
+"supports-color@npm:^8.0.0":
   version: 8.1.1
   resolution: "supports-color@npm:8.1.1"
   dependencies:
@@ -37584,15 +37272,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tree-kill@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "tree-kill@npm:1.2.2"
-  bin:
-    tree-kill: cli.js
-  checksum: 49117f5f410d19c84b0464d29afb9642c863bc5ba40fcb9a245d474c6d5cc64d1b177a6e6713129eb346b40aebb9d4631d967517f9fbe8251c35b21b13cd96c7
-  languageName: node
-  linkType: hard
-
 "trim-newlines@npm:^1.0.0":
   version: 1.0.0
   resolution: "trim-newlines@npm:1.0.0"
@@ -38296,16 +37975,16 @@ __metadata:
   linkType: hard
 
 "tzdata@npm:^1.0.30":
-  version: 1.0.38
-  resolution: "tzdata@npm:1.0.38"
-  checksum: 866abff1316bd1311057f5de9da702c78a27f3bba213aa6986e8e4d22d0d25b554dda2330e6d853e2c34566270bb327babe467ad9a5f069ad466f09571872800
+  version: 1.0.37
+  resolution: "tzdata@npm:1.0.37"
+  checksum: 5263d22e257639f292e314c15942d147e82211b370cbeccd5e16025b0fdb06371fdb989f247c386db60b580b2fe12b39601a3c21d35e09a037d60a92323cb3cd
   languageName: node
   linkType: hard
 
 "ua-parser-js@npm:^1.0.33":
-  version: 1.0.35
-  resolution: "ua-parser-js@npm:1.0.35"
-  checksum: 02370d38a0c8b586f2503d1c3bbba5cbc0b97d407282f9023201a99e4c03eae4357a2800fdf50cf80d73ec25c0b0cc5bfbaa03975b0add4043d6e4c86712c9c1
+  version: 1.0.34
+  resolution: "ua-parser-js@npm:1.0.34"
+  checksum: 78924548870c67b93b4bc6bd3d9736badfca8cc02ea01510fb0ed38e296a8c0713a6bec6226ed2383d5d521bab651a6fcaa75d421f04cafebca0f93250480fb3
   languageName: node
   linkType: hard
 
@@ -39420,21 +39099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wait-on@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "wait-on@npm:7.0.1"
-  dependencies:
-    axios: ^0.27.2
-    joi: ^17.7.0
-    lodash: ^4.17.21
-    minimist: ^1.2.7
-    rxjs: ^7.8.0
-  bin:
-    wait-on: bin/wait-on
-  checksum: 1e8a17d8ee6436f71d3ab82781ce31267481fcd7bbccde49b0f8124871e6e40a1acac3401f04f775ba6203853a5813352fa131620fc139914351f3b2894d573f
-  languageName: node
-  linkType: hard
-
 "walker@npm:^1.0.7, walker@npm:^1.0.8, walker@npm:~1.0.5":
   version: 1.0.8
   resolution: "walker@npm:1.0.8"
@@ -39819,6 +39483,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-bundle-analyzer@npm:4.3.0":
+  version: 4.3.0
+  resolution: "webpack-bundle-analyzer@npm:4.3.0"
+  dependencies:
+    acorn: ^8.0.4
+    acorn-walk: ^8.0.0
+    chalk: ^4.1.0
+    commander: ^6.2.0
+    gzip-size: ^6.0.0
+    lodash: ^4.17.20
+    opener: ^1.5.2
+    sirv: ^1.0.7
+    ws: ^7.3.1
+  bin:
+    webpack-bundle-analyzer: lib/bin/analyzer.js
+  checksum: 00b7bf4ac9fca17062b66b6897145b94e87153d3ec8815f0e0c05a3b8a1ca75320262db01a5fa634f604ee3d41aecde1ee59838d05b6d03cd5be62eb1addbcf8
+  languageName: node
+  linkType: hard
+
 "webpack-bundle-analyzer@npm:4.7.0":
   version: 4.7.0
   resolution: "webpack-bundle-analyzer@npm:4.7.0"
@@ -40874,7 +40557,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:^3.17.3, zod@npm:^3.18.0":
+"zod@npm:^3.17.3":
   version: 3.21.4
   resolution: "zod@npm:3.21.4"
   checksum: f185ba87342ff16f7a06686767c2b2a7af41110c7edf7c1974095d8db7a73792696bcb4a00853de0d2edeb34a5b2ea6a55871bc864227dace682a0a28de33e1f