editor changes

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>

apps/web/components/AdditionalCalendarSelector.tsx

@@ -73,7 +73,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
               },
             }}
             isSearchable={false}
-            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
+            className="border-default text-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm font-medium"
             isLoading={isLoading}
             components={{ Option: ImageOption }}
           />

apps/web/components/AppListCard.tsx

@@ -68,7 +68,7 @@ export default function AppListCard(props: AppListCardProps) {
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
-            <h3 className="truncate text-sm font-semibold text-gray-900">{title}</h3>
+            <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
             <div className="flex items-center gap-x-2">
               {isDefault && <Badge variant="green">{t("default")}</Badge>}
               {isTemplate && <Badge variant="red">Template</Badge>}

apps/web/components/DestinationCalendarSelector.tsx

@@ -117,7 +117,7 @@ const DestinationCalendarSelector = ({
         }}
         isSearchable={false}
         className={classNames(
-          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
+          "border-default mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm",
           !hidePlaceholder && "font-medium"
         )}
         onChange={(option) => {

apps/web/components/Embed.tsx

@@ -506,7 +506,7 @@ const tabs = [
       return (
         <>
           <div>
-            <small className="flex py-4 text-gray-500">
+            <small className="text-subtle flex py-4">
               {t("place_where_cal_widget_appear", { appName: APP_NAME })}
             </small>
           </div>
@@ -531,7 +531,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
 <!-- Cal ${embedType} embed code ends -->`
             }
           />
-          <p className="hidden text-sm text-gray-500">
+          <p className="text-subtle hidden text-sm">
             {t(
               "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
             )}
@@ -558,7 +558,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
       }
       return (
         <>
-          <small className="flex py-4 text-gray-500">{t("create_update_react_component")}</small>
+          <small className="text-subtle flex py-4">{t("create_update_react_component")}</small>
           <TextArea
             data-testid="embed-react"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
@@ -619,7 +619,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <FiSun className="ml-2 h-4 w-4 text-gray-500" />
+      <FiSun className="text-subtle ml-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -631,17 +631,17 @@ const ChooseEmbedTypesDialogContent = () => {
   return (
     <DialogContent type="creation" size="lg">
       <div className="mb-4">
-        <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+        <h3 className="text-emphasis text-lg font-bold leading-6" id="modal-title">
           {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
-          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
+          <p className="text-subtle text-sm">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
         </div>
       </div>
       <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
+            className="hover:bg-subtle w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-subtle ltr:mr-2 rtl:ml-2"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -649,11 +649,11 @@ const ChooseEmbedTypesDialogContent = () => {
                 embedType: embed.type,
               });
             }}>
-            <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
+            <div className="bg-default order-none box-border flex-none rounded-sm border border-solid">
               {embed.illustration}
             </div>
-            <div className="mt-2 font-medium text-gray-900">{embed.title}</div>
-            <p className="text-sm text-gray-500">{embed.subtitle}</p>
+            <div className="text-emphasis mt-2 font-medium">{embed.title}</div>
+            <p className="text-subtle text-sm">{embed.subtitle}</p>
           </button>
         ))}
       </div>
@@ -814,8 +814,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   return (
     <DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
       <div className="flex">
-        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
-          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
+        <div className="bg-muted flex w-1/3 flex-col p-8">
+          <h3 className="text-emphasis mb-2 flex text-xl font-bold leading-6" id="modal-title">
             <button
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
@@ -832,7 +832,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger
                   type="button"
-                  className="flex w-full items-center text-base font-medium text-gray-900">
+                  className="text-emphasis flex w-full items-center text-base font-medium">
                   <div>
                     {embedType === "inline"
                       ? "Inline Embed Customization"
@@ -843,7 +843,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   <FiChevronRight
                     className={`${
                       isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
+                    } text-subtle ml-auto h-5 w-5`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent className="text-sm">
@@ -1010,11 +1010,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger className="flex w-full" type="button">
-                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
+                  <div className="text-emphasis  text-base font-medium">Cal Booking Customization</div>
                   <FiChevronRight
                     className={`${
                       isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
+                    } text-subtle ml-auto h-5 w-5`}
                   />
                 </CollapsibleTrigger>
                 <CollapsibleContent>

apps/web/components/ImageUploader.tsx

@@ -123,7 +123,7 @@ export default function ImageUploader({
       <DialogContent>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-lg leading-6 text-gray-900" id="modal-title">
+            <h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
               {t("upload_target", { target })}
             </h3>
           </div>
@@ -131,9 +131,9 @@ export default function ImageUploader({
         <div className="mb-4">
           <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
-              <div className="flex h-20 max-h-20 w-20 items-center justify-start rounded-full bg-gray-50">
+              <div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
                 {!imageSrc && (
-                  <p className="w-full text-center text-sm text-white sm:text-xs">
+                  <p className="text-inverted w-full text-center text-sm sm:text-xs">
                     {t("no_target", { target })}
                   </p>
                 )}
@@ -144,7 +144,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="border-default bg-default hover:bg-mutedover:text-emphasis dark:hover:bg-inverted text-default dark:text-inverted mt-8 rounded-sm border px-3 py-1 text-xs font-medium leading-4 focus:outline-none focus:ring-2 focus:ring-empthasis focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent">
               <input
                 onInput={onInputFile}
                 type="file"

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"

apps/web/components/apps/App.tsx

@@ -95,7 +95,7 @@ const Component = ({
   return (
     <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
       {hasImages && (
-        <div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
+        <div className="align-center bg-subtle mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
           {images ? (
             images.map((img) => (
               <img
@@ -119,12 +119,12 @@ const Component = ({
           <header>
             <div className="mb-4 flex items-center">
               <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
-              <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
+              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
             </div>
-            <h2 className="text-sm font-medium text-gray-600">
+            <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 })}
@@ -235,7 +235,7 @@ const Component = ({
         )}
 
         <div className="prose-sm prose mt-8">{body}</div>
-        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
+        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
         <span>
           {price === 0 ? (
             t("free_to_use_apps")
@@ -251,16 +251,16 @@ const Component = ({
           )}
         </span>
 
-        <h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
+        <h4 className="text-emphasis mt-8 mb-2 font-semibold ">{t("learn_more")}</h4>
         <ul className="prose-sm -ml-1 -mr-1 leading-5">
           {docs && (
             <li>
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="text-sm font-normal text-black no-underline hover:underline"
+                className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                <FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -270,9 +270,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -282,9 +282,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={"mailto:" + email}>
-                <FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
 
                 {email}
               </a>
@@ -295,9 +295,9 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -307,16 +307,16 @@ const Component = ({
               <a
                 target="_blank"
                 rel="noreferrer"
-                className="font-normal text-black no-underline hover:underline"
+                className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
           )}
         </ul>
         <hr className="my-8" />
-        <span className="leading-1 block text-xs text-gray-500">
+        <span className="leading-1 text-subtle block text-xs">
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>

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-t border-subtle">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                          <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
                           <ul className="space-y-2 px-5 py-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
@@ -218,7 +218,7 @@ function ConnectedCalendarsList(props: Props) {
                           credentialId={item.credentialId}
                           trashIcon
                           onSuccess={props.onChanged}
-                          buttonProps={{ className: "border border-gray-300" }}
+                          buttonProps={{ className: "border border-default" }}
                         />
                       </div>
                     }
@@ -279,12 +279,12 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                         </div>
                       }
                     />
-                    <div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
+                    <div className="bg-muted flex justify-between rounded-md border border-subtle p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
-                        <div className="relative rounded-md border border-gray-200 bg-white p-1.5">
+                        <div className="bg-default relative rounded-md border border-subtle p-1.5">
                           <FiCalendar className="h-8 w-8" strokeWidth="1" />
                           <FiPlus
-                            className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
+                            className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
                             strokeWidth="4"
                           />
                         </div>

apps/web/components/apps/DestinationCalendarSelector.tsx

@@ -119,7 +119,7 @@ const DestinationCalendarSelector = ({
         }}
         isSearchable={false}
         className={classNames(
-          "block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
+          "border-default block w-full min-w-0 flex-1 rounded-none rounded-r-sm text-sm",
           !hidePlaceholder && "font-medium"
         )}
         onChange={(option) => {

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

apps/web/components/availability/SkeletonLoader.tsx

@@ -7,7 +7,7 @@ import classNames from "@lib/classNames";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-subtle bg-default 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",
+        "group flex w-full items-center justify-between rounded-sm border border-subtle px-[10px] py-3",
         className
       )}>
       <div className="flex-grow truncate text-sm">

apps/web/components/booking/AvailableEventLocations.tsx

@@ -12,7 +12,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
   const { t } = useLocale();
 
   return locations.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">
       {locations.map((location, index) => {
         const eventLocationType = getEventLocationType(location.type);
         if (!eventLocationType) {

apps/web/components/booking/AvailableTimes.tsx

@@ -67,7 +67,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
         <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
           <div className="mb-6 flex items-center text-left text-base">
             <div className="mr-4">
-              <span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
+              <span className="text-bookingdarker dark:text-darkgray-800 text-emphasis font-semibold">
                 {nameOfDay(i18n.language, Number(date.format("d")), "short")}
               </span>
               <span className="text-bookinglight font-medium">
@@ -121,7 +121,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
                       <div
                         className={classNames(
-                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
+                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 bg-default mb-2 block rounded-sm border py-2 font-medium opacity-25 dark:border-transparent ",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}>
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
@@ -132,8 +132,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                         href={bookingUrl}
                         prefetch={false}
                         className={classNames(
-                          "hover:bg-brand hover:border-brand hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
-                          "dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
+                          "hover:bg-brand hover:border-brand-default hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
+                          "dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 bg-default mb-2 block rounded-md border py-2 text-sm font-medium dark:border-transparent",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}
                         data-testid="time">
@@ -159,7 +159,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
 
             {!isLoading && !slots.length && (
               <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
-                <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
+                <h1 className="dark:text-inverted text-emphasis my-6 text-xl">{t("all_booked_today")}</h1>
               </div>
             )}
 

apps/web/components/booking/BookingDescription.tsx

@@ -83,30 +83,18 @@ const BookingDescription: FC<Props> = (props) => {
         size="sm"
         truncateAfter={3}
       />
-      <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
-        {profile.name}
-      </h2>
-      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
-        {eventType.title}
-      </h1>
-      <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
+      <h2 className="text-default mt-2 break-words text-sm font-medium">{profile.name}</h2>
+      <h1 className="font-cal text-emphasis mb-6 break-words text-2xl font-semibold">{eventType.title}</h1>
+      <div className=" text-default flex flex-col space-y-4 text-sm font-medium">
         {eventType?.description && (
-          <div
-            className={classNames(
-              "flex",
-              isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
-            )}>
+          <div className={classNames("flex", isBookingPage && "text-default text-sm font-medium")}>
             <div className="scroll-bar scrollbar-track-w-20 max-h-[200px] max-w-full flex-shrink overflow-scroll 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 +107,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
@@ -139,7 +127,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={() => {

apps/web/components/booking/BookingListItem.tsx

@@ -179,7 +179,7 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
+      <div className="text-subtle ml-1 mr-8 flex" data-testid="request_reschedule_sent">
         <FiSend className="-mt-[1px] w-4 rotate-45" />
         <p className="ml-2 ">{t("reschedule_request_sent")}</p>
       </div>
@@ -255,7 +255,7 @@ function BookingListItem(booking: BookingItemProps) {
               label={
                 <>
                   {t("rejection_reason")}
-                  <span className="font-normal text-gray-500"> (Optional)</span>
+                  <span className="text-subtle font-normal"> (Optional)</span>
                 </>
               }
               value={rejectionReason}
@@ -276,13 +276,13 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="group flex flex-col hover:bg-gray-50 sm:flex-row">
+      <tr className="hover:bg-muted group flex flex-col sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>
           <div className="cursor-pointer py-4">
-            <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-            <div className="text-sm text-gray-500">
+            <div className="text-emphasis text-sm leading-6">{startTime}</div>
+            <div className="text-subtle text-sm">
               {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
               {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
               <MeetingTimeInTimezones
@@ -309,7 +309,7 @@ function BookingListItem(booking: BookingItemProps) {
               </Badge>
             )}
             {recurringDates !== undefined && (
-              <div className="mt-2 text-sm text-gray-400">
+              <div className="text-muted mt-2 text-sm">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
               </div>
             )}
@@ -319,8 +319,8 @@ function BookingListItem(booking: BookingItemProps) {
           {/* Time and Badges for mobile */}
           <div className="w-full pt-4 pb-2 sm:hidden">
             <div className="flex w-full items-center justify-between sm:hidden">
-              <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-              <div className="pr-2 text-sm text-gray-500">
+              <div className="text-emphasis text-sm leading-6">{startTime}</div>
+              <div className="text-subtle pr-2 text-sm">
                 {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
                 {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
                 <MeetingTimeInTimezones
@@ -349,7 +349,7 @@ function BookingListItem(booking: BookingItemProps) {
               </Badge>
             )}
             {recurringDates !== undefined && (
-              <div className="text-sm text-gray-400 sm:hidden">
+              <div className="text-muted text-sm sm:hidden">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
               </div>
             )}
@@ -359,7 +359,7 @@ function BookingListItem(booking: BookingItemProps) {
             <div
               title={title}
               className={classNames(
-                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
+                "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
               {title}
@@ -373,7 +373,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>
@@ -397,7 +397,7 @@ function BookingListItem(booking: BookingItemProps) {
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
               {isConfirmed && <TableActions actions={bookedActions} />}
-              {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
+              {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             </>
           ) : null}
           {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
@@ -456,10 +456,10 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                   </p>
                 );
               })}>
-              <div className="text-gray-600 dark:text-white">
+              <div className="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
@@ -532,13 +532,13 @@ const DisplayAttendees = ({
 }) => {
   const { t } = useLocale();
   return (
-    <div className="text-sm text-gray-900">
+    <div className="text-emphasis text-sm">
       {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
       {attendees.length > 1 ? <span>,&nbsp;</span> : <span>&nbsp;{t("and")}&nbsp;</span>}
       <Attendee {...attendees[0]} />
       {attendees.length > 1 && (
         <>
-          <div className="inline-block text-sm text-gray-900">&nbsp;{t("and")}&nbsp;</div>
+          <div className="text-emphasis inline-block text-sm">&nbsp;{t("and")}&nbsp;</div>
           {attendees.length > 2 ? (
             <Tooltip
               content={attendees.slice(1).map((attendee) => (

apps/web/components/booking/CancelBooking.tsx

@@ -39,11 +39,11 @@ export default function CancelBooking(props: Props) {
     <>
       {error && (
         <div className="mt-8">
-          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+          <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
             <FiX className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
-            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+            <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
               {error}
             </h3>
           </div>
@@ -51,12 +51,14 @@ export default function CancelBooking(props: Props) {
       )}
       {!error && (
         <div className="mt-5 sm:mt-6">
-          <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
+          <label className="text-bookingdark dark:text-inverted font-medium">
+            {t("cancellation_reason")}
+          </label>
           <TextArea
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="dark:bg-darkgray-100 dark:border-darkgray-400 mt-2 mb-4 w-full dark:text-white "
+            className="dark:bg-darkgray-100 dark:border-darkgray-400 dark:text-inverted mt-2 mb-4 w-full "
             rows={3}
           />
           <div className="flex flex-col-reverse rtl:space-x-reverse ">

apps/web/components/booking/SkeletonLoader.tsx

@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-gray-200 rounded-md border border-subtle bg-default sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />

apps/web/components/booking/SlotPicker.tsx

@@ -165,7 +165,7 @@ export const SlotPicker = ({
         isLoading={isLoading}
         className={classNames(
           "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 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 ? "sm:dark:border-darkgray-200 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"}

apps/web/components/booking/TimezoneDropdown.tsx

@@ -17,8 +17,8 @@ export function TimezoneDropdown({
 
   return (
     <>
-      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
+      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 focus-within:bg-emphasis hover:bg-subtle [&_svg]:focus-within:text-emphasis [&_p]:focus-within:text-emphasis dark:[&_svg]:focus-within:text-inverted dark:[&_p]:focus-within:text-inverted -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium lg:max-w-[12rem]">
+        <FiGlobe className="text-default flex h-4 w-4 ltr:mr-[2px] rtl:ml-[2px]" />
         <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
       </div>
     </>

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -159,7 +159,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
               className={classNames(
                 isBackgroundTransparent
                   ? ""
-                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
+                  : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-default pb-4 md:pb-0",
                 "border-bookinglightest md:rounded-md md:border",
                 isEmbed && "mx-auto"
               )}>
@@ -167,7 +167,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                 {showEventTypeDetails && (
                   <div
                     className={classNames(
-                      "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
+                      "sm:dark:border-darkgray-200 flex flex-col border-subtle p-5 sm:border-r",
                       "min-w-full md:w-[230px] md:min-w-[230px]",
                       recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
                     )}>
@@ -183,7 +183,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                               type="number"
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
+                              className="w-15 dark:bg-darkgray-200 border-default bg-default h-7 rounded-sm text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-empthasis"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
@@ -215,12 +215,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 dark:text-darkgray-600">
+                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-subtle" />
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
                     </div>

apps/web/components/booking/pages/BookingPage.tsx

@@ -482,16 +482,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 dark:text-darkgray-600 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({

apps/web/components/dialog/EditLocationDialog.tsx

@@ -161,7 +161,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
       return (
         <div>
-          <label htmlFor="locationInput" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="locationInput" className="text-default block text-sm font-medium">
             {t(eventLocationType.messageForOrganizer || "")}
           </label>
           <div className="mt-1">
@@ -171,7 +171,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
-              className="block w-full rounded-sm border-gray-300 text-sm"
+              className="border-default block w-full rounded-sm text-sm"
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
                 defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
@@ -219,11 +219,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
           </div>
           <div className="w-full">
             <div className="mt-3 text-center sm:mt-0 sm:text-left">
-              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+              <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
                 {t("edit_location")}
               </h3>
               {!booking && (
-                <p className="text-sm text-gray-400">
+                <p className="text-muted text-sm">
                   <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
                     Can&apos;t find the right video app? Visit our
                     <Link className="cursor-pointer text-blue-500 underline" href="/apps/categories/video">
@@ -238,8 +238,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
             {booking && (
               <>
-                <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-                <p className="mb-2 ml-1 text-sm text-black">
+                <p className="text-emphasis mt-6 mb-2 ml-1 text-sm font-bold">{t("current_location")}:</p>
+                <p className="text-emphasis mb-2 ml-1 text-sm">
                   {getHumanReadableLocationValue(booking.location, t)}
                 </p>
               </>

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"

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">
+    <div className="bg-default overflow-hidden shadow sm:rounded-lg">
+      <div className="border-t border-subtle px-4 py-5 sm:p-0">
         <dl className="sm:divide-y sm:divide-gray-200">
           {debugMap.map(([key, value]) => {
             if (value !== undefined) {
               return (
                 <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
-                  <dt className="text-sm font-bold text-black">{key}</dt>
-                  <dd className="mt-1 text-sm text-black sm:col-span-2 sm:mt-0">{value}</dd>
+                  <dt className="text-emphasis text-sm font-bold">{key}</dt>
+                  <dd className="text-emphasis mt-1 text-sm sm:col-span-2 sm:mt-0">{value}</dd>
                 </div>
               );
             }
@@ -53,11 +53,11 @@ export const ErrorPage: React.FC<Props> = (props) => {
 
   return (
     <>
-      <div className="min-h-screen bg-white px-4">
+      <div className="bg-default min-h-screen px-4">
         <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
           <div className="text-center">
-            <p className="text-sm font-semibold uppercase tracking-wide text-black">{statusCode}</p>
-            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl">
+            <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{statusCode}</p>
+            <h1 className="text-emphasis mt-2 text-4xl font-extrabold tracking-tight sm:text-5xl">
               {message}
             </h1>
           </div>

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -123,10 +123,7 @@ const EventTypeScheduleDetails = () => {
           return (
             <li key={day} className="my-6 flex border-transparent last:mb-2">
               <span
-                className={classNames(
-                  "w-20 font-medium sm:w-32",
-                  !isAvailable && "text-gray-500 opacity-50"
-                )}>
+                className={classNames("w-20 font-medium sm:w-32", !isAvailable && "text-subtle opacity-50")}>
                 {day}
               </span>
               {isLoading ? (
@@ -144,7 +141,7 @@ const EventTypeScheduleDetails = () => {
                   ))}
                 </div>
               ) : (
-                <span className="ml-6 text-gray-500 opacity-50 sm:ml-0">{t("unavailable")}</span>
+                <span className="text-subtle ml-6 opacity-50 sm:ml-0">{t("unavailable")}</span>
               )}
             </li>
           );
@@ -152,7 +149,7 @@ const EventTypeScheduleDetails = () => {
       </ol>
       <hr />
       <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>
@@ -177,7 +174,7 @@ const EventTypeSchedule = () => {
   return (
     <div className="space-y-4">
       <div>
-        <label htmlFor="availability" className="mb-2 block text-sm font-medium leading-none text-gray-700">
+        <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
           {t("availability")}
         </label>
         <Controller

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -58,23 +58,23 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
         className="mb-0"
       />
       <div className="pt-6 text-sm">
-        <div className="mb-6 rounded-md bg-gray-100 p-2">
-          <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
+        <div className="bg-subtle mb-6 rounded-md p-2">
+          <h1 className="text-emphasis mb-2 ml-1 font-medium">{t("available_variables")}</h1>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
-            <p className="text-gray-900">{t("event_name_info")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Event type title}`}</p>
+            <p className="text-emphasis">{t("event_name_info")}</p>
           </div>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
-            <p className="text-gray-900">{t("your_full_name")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Organiser}`}</p>
+            <p className="text-emphasis">{t("your_full_name")}</p>
           </div>
           <div className="mb-2.5 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
-            <p className="text-gray-900">{t("scheduler_full_name")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Scheduler}`}</p>
+            <p className="text-emphasis">{t("scheduler_full_name")}</p>
           </div>
           <div className="mb-1 flex font-normal">
-            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
-            <p className="text-gray-900">{t("location_info")}</p>
+            <p className="text-muted ml-1 mr-5 w-28">{`{Location}`}</p>
+            <p className="text-emphasis">{t("location_info")}</p>
           </div>
         </div>
         <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
@@ -84,9 +84,9 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
             backgroundImage: "url(/calendar-preview.svg)",
           }}>
           <div className="m-auto flex items-center justify-center self-stretch">
-            <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
-              <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">{previewText}</p>
-              <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>

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -99,7 +99,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             <Link
               href="/apps/categories/calendar"
               target="_blank"
-              className="text-sm text-gray-600 hover:text-gray-900">
+              className="hover:text-emphasis text-default text-sm">
               {t("add_another_calendar")}
             </Link>
           </div>
@@ -118,7 +118,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">
@@ -134,7 +134,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               StartIcon={FiEdit}
               variant="icon"
               color="minimal"
-              className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
+              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
               onClick={() => setShowEventNameTip((old) => !old)}
               aria-label="edit custom name"
             />
@@ -248,7 +248,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                       showToast(t("enabled_after_update_description"), "warning");
                     }
                   }}
-                  className="hover:stroke-3 hover:bg-transparent hover:text-black"
+                  className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
                   type="button">
                   <FiCopy />
                 </Button>

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) => (

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -290,7 +290,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                     <RadioGroup.Item
                       id={period.type}
                       value={period.type}
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
                     {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
@@ -298,14 +298,14 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                       <div className="flex h-9">
                         <Input
                           type="number"
-                          className="block w-16 rounded-md border-gray-300 py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                          className="border-default block w-16 rounded-md py-3 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                           placeholder="30"
                           {...formMethods.register("periodDays", { valueAsNumber: true })}
                           defaultValue={eventType.periodDays || 30}
                         />
                         <select
                           id=""
-                          className="block h-9 w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                          className="border-default block h-9 w-full rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
                           {...formMethods.register("periodCountCalendarDays")}
                           defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                           <option value="1">{t("calendar_days")}</option>
@@ -405,7 +405,7 @@ const BookingLimits = () => {
                       <Input
                         id={`${bookingLimitKey}-limit`}
                         type="number"
-                        className="mb-0 block w-16 rounded-md border-gray-300 text-sm  [appearance:textfield]"
+                        className="border-default mb-0 block w-16 rounded-md text-sm  [appearance:textfield]"
                         placeholder="1"
                         min={1}
                         defaultValue={bookingAmount}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -199,7 +199,7 @@ export const EventSetupTab = (
               return (
                 <li
                   key={`${location.type}${index}`}
-                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
+                  className="border-default mb-2 rounded-md border py-1.5 px-2">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
@@ -221,11 +221,11 @@ export const EventSetupTab = (
                           openLocationModal(location.type);
                         }}
                         aria-label={t("edit")}
-                        className="mr-1 p-1 text-gray-500 hover:text-gray-900">
+                        className="hover:text-emphasis text-subtle mr-1 p-1">
                         <FiEdit2 className="h-4 w-4" />
                       </button>
                       <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
+                        <FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
                       </button>
                     </div>
                   </div>
@@ -236,7 +236,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>

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

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 mt-4  rounded-md border-subtle sm:mx-0 xl:mt-0",
                 disableBorder ? "border-0 " : "p-2 md:border md:p-6"
               )}>
               {children}

apps/web/components/eventtype/RecurringEventController.tsx

@@ -57,12 +57,12 @@ export default function RecurringEventController({
               {recurringEventState && (
                 <div data-testid="recurring-event-collapsible" className="text-sm">
                   <div className="flex items-center">
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
                     <input
                       type="number"
                       min="1"
                       max="20"
-                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="border-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                       defaultValue={recurringEventState.interval}
                       onChange={(event) => {
                         const newVal = {
@@ -89,12 +89,12 @@ export default function RecurringEventController({
                     />
                   </div>
                   <div className="mt-4 flex items-center">
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
                     <input
                       type="number"
                       min="1"
                       max="20"
-                      className="block h-[36px] w-16 rounded-md border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                      className="border-default block h-[36px] w-16 rounded-md text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                       defaultValue={recurringEventState.count}
                       onChange={(event) => {
                         const newVal = {
@@ -105,7 +105,7 @@ export default function RecurringEventController({
                         setRecurringEventState(newVal);
                       }}
                     />
-                    <p className="text-gray-900 ltr:mr-2 rtl:ml-2">
+                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">
                       {t("events", {
                         count: recurringEventState.count,
                       })}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -82,7 +82,7 @@ export default function RequiresConfirmationController({
                     <RadioGroup.Item
                       id="always"
                       value="always"
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
                     <Label htmlFor="always" className="!m-0 flex items-center">
@@ -93,7 +93,7 @@ export default function RequiresConfirmationController({
                     <RadioGroup.Item
                       id="notice"
                       value="notice"
-                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      className="min-w-4 bg-default flex h-4 w-4 cursor-pointer items-center rounded-full border border-black focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
                       <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
                     </RadioGroup.Item>
                     <Label htmlFor="notice" className="!m-0 flex items-center">
@@ -116,7 +116,7 @@ export default function RequiresConfirmationController({
                                   });
                                   formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
                                 }}
-                                className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
+                                className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
                                 defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
                               />
                               <select
@@ -130,7 +130,7 @@ export default function RequiresConfirmationController({
                                   });
                                   formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
                                 }}
-                                className="ml-2 block h-9 rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                                className="border-default ml-2 block h-9 rounded-md py-2 pl-3 pr-10 text-sm focus:outline-none"
                                 defaultValue={
                                   metadata?.requiresConfirmationThreshold?.unit ||
                                   defaultRequiresConfirmationSetup.unit

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -11,7 +11,7 @@ function SkeletonLoader() {
           <SkeletonText className="h-4 w-24" />
         </div>
       </div>
-      <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="divide-y divide-gray-200 rounded-md border border-subtle bg-default sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />

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="h-[1px] w-full border-b border-subtle" />
       <div>
         <ul className="p-4">
           {calendars?.map((calendar, i) => (

apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx

@@ -17,7 +17,7 @@ const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps)
     <>
       <div className="mt-6 flex flex-row">
         <div className="w-full">
-          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-gray-700">
+          <label htmlFor="createEventsOn" className="text-default flex text-sm font-medium">
             {t("create_events_on")}
           </label>
           <div className="mt-2">

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -33,7 +33,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         firstCalendar.integration.title &&
         firstCalendar.integration.imageSrc && (
           <>
-            <List className="rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+            <List className="bg-default rounded-md border border-subtle p-0 dark:bg-black">
               <ConnectedCalendarItem
                 key={firstCalendar.integration.title}
                 name={firstCalendar.integration.title}
@@ -49,13 +49,13 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
             </List>
             {/* Create event on selected calendar */}
             <CreateEventsOnCalendarSelect calendar={destinationCalendar} />
-            <p className="mt-4 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
+            <p className="text-subtle mt-4 text-sm">{t("connect_calendars_from_app_store")}</p>
           </>
         )}
 
       {/* Connect calendars list */}
       {firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
-        <List className="mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black sm:mx-0">
+        <List className="bg-default mx-1 divide-y divide-gray-200 rounded-md border border-subtle p-0 dark:bg-black sm:mx-0">
           {queryIntegrations.data &&
             queryIntegrations.data.items.map((item) => (
               <li key={item.title}>
@@ -73,7 +73,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
       )}
 
       {queryIntegrations.isLoading && (
-        <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+        <ul className="bg-default divide-y divide-gray-200 rounded-md border border-subtle 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()}

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 {

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -117,7 +117,7 @@ const UserProfile = (props: IUserProfileProps) => {
           name="avatar"
           id="avatar"
           placeholder="URL"
-          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-gray-800"
+          className="border-default mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none focus:ring-empthasis"
           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>

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -63,7 +63,7 @@ const UserSettings = (props: IUserSettingsProps) => {
 
         {/* Full name textfield */}
         <div className="w-full">
-          <label htmlFor="name" className="mb-2 block text-sm font-medium text-gray-700">
+          <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
             {t("full_name")}
           </label>
           <input
@@ -73,7 +73,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             type="text"
             autoComplete="off"
             autoCorrect="off"
-            className="w-full rounded-md border border-gray-300 text-sm"
+            className="border-default w-full rounded-md border text-sm"
           />
           {errors.name && (
             <p data-testid="required" className="py-2 text-xs text-red-500">
@@ -83,7 +83,7 @@ const UserSettings = (props: IUserSettingsProps) => {
         </div>
         {/* Timezone select field */}
         <div className="w-full">
-          <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="timeZone" className="text-default block text-sm font-medium">
             {t("timezone")}
           </label>
 
@@ -94,7 +94,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             className="mt-2 w-full rounded-md text-sm"
           />
 
-          <p className="mt-3 flex flex-row font-sans text-xs leading-tight text-gray-500 dark:text-white">
+          <p className="text-subtle dark:text-inverted mt-3 flex flex-row font-sans text-xs leading-tight">
             {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
           </p>
         </div>

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>

apps/web/components/security/ChangePasswordSection.tsx

@@ -62,11 +62,11 @@ const ChangePasswordSection = () => {
       <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
         <div className="py-6 lg:pb-5">
           <div className="my-3">
-            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("change_password")}</h2>
           </div>
           <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
             <div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
-              <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="current_password" className="text-default block text-sm font-medium">
                 {t("current_password")}
               </label>
               <div className="mt-1">
@@ -77,13 +77,13 @@ const ChangePasswordSection = () => {
                   name="current_password"
                   id="current_password"
                   required
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                   placeholder={t("your_old_password")}
                 />
               </div>
             </div>
             <div className="w-full sm:w-1/2">
-              <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
+              <label htmlFor="new_password" className="text-default block text-sm font-medium">
                 {t("new_password")}
               </label>
               <div className="mt-1">
@@ -94,7 +94,7 @@ const ChangePasswordSection = () => {
                   value={newPassword}
                   required
                   onInput={(e) => setNewPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
+                  className="border-default block w-full rounded-sm text-sm"
                   placeholder={t("super_secure_new_password")}
                 />
               </div>

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>
 

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

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>
 

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

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>
   );

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>
 

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>
                     )

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>

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="my-8 w-full border-[1.5px] border-subtle" />
+            <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 ? (

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>

apps/web/components/team/screens/Team.tsx

@@ -17,19 +17,19 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
 
   return (
     <Link key={member.id} href={`/${member.username}`}>
-      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4 hover:cursor-pointer hover:bg-gray-50 ">
+      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 bg-default hover:bg-muted group flex min-h-full flex-col space-y-2 rounded-md p-4 hover:cursor-pointer ">
         <Avatar
           size="md"
           alt={member.name || ""}
           imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
         />
         <section className="line-clamp-4 mt-2 w-full space-y-1">
-          <p className="font-medium text-gray-900 dark:text-white">{member.name}</p>
-          <div className="line-clamp-3 overflow-ellipsis text-sm font-normal text-gray-500 dark:text-white">
+          <p className="text-emphasis dark:text-inverted font-medium">{member.name}</p>
+          <div className="line-clamp-3 text-subtle dark:text-inverted overflow-ellipsis text-sm font-normal">
             {!isBioEmpty ? (
               <>
                 <div
-                  className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="dark:text-darkgray-600 text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
                 />
               </>

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 mx-2 rounded-md border border-subtle 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>
   );

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);

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>
     </>

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>

apps/web/components/ui/ModalContainer.tsx

@@ -19,7 +19,7 @@ export default function ModalContainer(
         <DialogContent>
           <div
             className={classNames(
-              "inline-block w-full transform bg-white text-left align-bottom transition-all sm:align-middle",
+              "inline-block w-full transform bg-default text-left align-bottom transition-all sm:align-middle",
               {
                 "sm:w-full sm:max-w-lg ": !props.wide,
                 "sm:w-4xl sm:max-w-4xl": props.wide,

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"

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>

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -195,7 +195,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <span
           className={classNames(
             isInputUsernamePremium ? "border border-orange-400 " : "",
-            "hidden h-9 items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
+            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 border-r-gray-300 px-3 text-sm md:inline-flex"
           )}>
           {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
@@ -216,7 +216,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
                 : "border-l-gray-300",
-              disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
+              disabled ? "bg-subtle text-muted focus:border-0" : ""
             )}
             value={inputUsernameValue}
             onChange={(event) => {
@@ -258,18 +258,18 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             <div className="mb-4 w-full px-4 pt-1">
               <DialogHeader title={t("confirm_username_change_dialog_title")} />
               {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="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">{t("current_username")}</p>
+                  <p className="text-subtle">{t("current_username")}</p>
                   <p className="mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
                 <div className="ml-6 flex-1">
-                  <p className="text-gray-500" data-testid="new-username">
+                  <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
                   <p>{inputUsernameValue}</p>

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -162,15 +162,15 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             <div className="mb-4 w-full px-4 pt-1">
               <DialogHeader title={t("confirm_username_change_dialog_title")} />
 
-              <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
+              <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">{t("current_username")}</p>
+                  <p className="text-subtle">{t("current_username")}</p>
                   <p className="mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
                 <div className="flex-1">
-                  <p className="text-gray-500" data-testid="new-username">
+                  <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
                   <p>{inputUsernameValue}</p>

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>

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>
       ))}

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}

apps/web/components/ui/form/LocationSelect.tsx

@@ -29,7 +29,7 @@ const OptionWithIcon = ({
   return (
     <div className="flex items-center gap-3">
       {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
-      <span className={classNames("text-sm font-medium", isSelected ? "text-white" : "text-gray-900")}>
+      <span className={classNames("text-sm font-medium", isSelected ? "text-inverted" : "text-emphasis")}>
         {label}
       </span>
     </div>
@@ -59,7 +59,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}
     />
   );

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>

apps/web/lib/app-providers.tsx

@@ -83,7 +83,7 @@ const AppProviders = (props: AppPropsWithChildren) => {
               nonce={props.pageProps.nonce}
               enableColorScheme={false}
               storageKey={storageKey}
-              forcedTheme={forcedTheme}
+              enableSystem={true}
               attribute="class">
               <MetaProvider>{props.children}</MetaProvider>
             </ThemeProvider>

apps/web/pages/404.tsx

@@ -51,21 +51,21 @@ export default function Custom404() {
           noindex: true,
         }}
       />
-      <div className="min-h-screen bg-white px-4" data-testid="404-page">
+      <div className="bg-default min-h-screen px-4" data-testid="404-page">
         <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
           {isSignup && process.env.NEXT_PUBLIC_WEBAPP_URL !== "https://app.cal.com" ? (
             <div>
               <div>
-                <p className="text-sm font-semibold uppercase tracking-wide text-black">
+                <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
                   {t("missing_license")}
                 </p>
-                <h1 className="font-cal mt-2 text-3xl font-extrabold text-gray-900">
+                <h1 className="font-cal text-emphasis mt-2 text-3xl font-extrabold">
                   {t("signup_requires")}
                 </h1>
                 <p className="mt-4">{t("signup_requires_description", { companyName: COMPANY_NAME })}</p>
               </div>
               <div className="mt-12">
-                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
+                <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
                   {t("next_steps")}
                 </h2>
                 <ul role="list" className="mt-4">
@@ -79,44 +79,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="rounded-sm focus-within:ring-2 focus-within:ring-empthasis 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="divide-y divide-gray-200 border-subtle">
                   <li className="px-4 py-2">
                     <Link
                       href={`${DEVELOPER_DOCS}/self-hosting/installation`}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                          <FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                          <FiFileText className="text-default h-6 w-6" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <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="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             {t("prisma_studio_tip")}
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
+                        <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </Link>
                   </li>
@@ -125,7 +125,7 @@ export default function Custom404() {
                       href={JOIN_SLACK}
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
+                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
                           <svg
                             viewBox="0 0 2447.6 2452.5"
                             className="h-6 w-6"
@@ -152,16 +152,16 @@ export default function Custom404() {
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <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="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
                             <span className="absolute inset-0" aria-hidden="true" />
                             Slack
                           </span>
                         </h3>
-                        <p className="text-base text-gray-500">{t("join_our_community")}</p>
+                        <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -169,7 +169,7 @@ export default function Custom404() {
                 <div className="mt-8">
                   <Link
                     href={`${WEBSITE_URL}/enterprise`}
-                    className="text-base font-medium text-black hover:text-gray-500">
+                    className="hover:text-subtle text-emphasis text-base font-medium">
                     {t("contact_sales")}
                     <span aria-hidden="true"> &rarr;</span>
                   </Link>
@@ -178,147 +178,151 @@ export default function Custom404() {
             </div>
           ) : (
             <>
-              <div className="text-center">
-                <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
-                <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
-                  {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
-                </h1>
-                {isSubpage ? (
-                  <span className="mt-2 inline-block text-lg ">
-                    {t("check_spelling_mistakes_or_go_back")}
-                  </span>
-                ) : isCalcom ? (
-                  <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
-                    {t("the_username")}{" "}
-                    <strong className="text-blue-500">
-                      {new URL(WEBSITE_URL).hostname}
-                      {username}
-                    </strong>{" "}
-                    {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
-                  </a>
-                ) : (
-                  <span className="mt-2 inline-block text-lg">
-                    {t("the_username")}{" "}
-                    <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
-                    {t("is_still_available")}
-                  </span>
-                )}
-              </div>
-              <div className="mt-12">
-                <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
-                  {t("popular_pages")}
-                </h2>
-                {!isSubpage && isCalcom && (
-                  <ul role="list" className="mt-4">
-                    <li className="border-2 border-green-500 px-4 py-2">
+              <>
+                <div className="text-center">
+                  <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">
+                    {t("error_404")}
+                  </p>
+                  <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
+                    {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
+                  </h1>
+                  {isSubpage ? (
+                    <span className="mt-2 inline-block text-lg ">
+                      {t("check_spelling_mistakes_or_go_back")}
+                    </span>
+                  ) : isCalcom ? (
+                    <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
+                      {t("the_username")}{" "}
+                      <strong className="text-blue-500">
+                        {new URL(WEBSITE_URL).hostname}
+                        {username}
+                      </strong>{" "}
+                      {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
+                    </a>
+                  ) : (
+                    <span className="mt-2 inline-block text-lg">
+                      {t("the_username")}{" "}
+                      <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
+                      {t("is_still_available")}
+                    </span>
+                  )}
+                </div>
+                <div className="mt-12">
+                  <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
+                    {t("popular_pages")}
+                  </h2>
+                  {!isSubpage && isCalcom && (
+                    <ul role="list" className="mt-4">
+                      <li className="border-2 border-green-500 px-4 py-2">
+                        <a
+                          href={url}
+                          target="_blank"
+                          className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
+                          rel="noreferrer">
+                          <div className="flex-shrink-0">
+                            <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                              <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                            </span>
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <h3 className="text-emphasis text-base font-medium">
+                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
+                                <span className="focus:outline-none">
+                                  <span className="absolute inset-0" aria-hidden="true" />
+                                  {t("register")} <strong className="text-green-500">{username}</strong>
+                                </span>
+                              </span>
+                            </h3>
+                            <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
+                          </div>
+                          <div className="flex-shrink-0 self-center">
+                            <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          </div>
+                        </a>
+                      </li>
+                    </ul>
+                  )}
+
+                  <ul role="list" className="mt-4 divide-y divide-gray-200 border-subtle">
+                    {links.map((link, linkIdx) => (
+                      <li key={linkIdx} className="px-4 py-2">
+                        <Link
+                          href={link.href}
+                          className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
+                          <div className="flex-shrink-0">
+                            <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                              <link.icon className="text-default h-6 w-6" aria-hidden="true" />
+                            </span>
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <h3 className="text-emphasis text-base font-medium">
+                              <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
+                                <span className="absolute inset-0" aria-hidden="true" />
+                                {link.title}
+                              </span>
+                            </h3>
+                            <p className="text-subtle text-base">{link.description}</p>
+                          </div>
+                          <div className="flex-shrink-0 self-center">
+                            <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          </div>
+                        </Link>
+                      </li>
+                    ))}
+                    <li className="px-4 py-2">
                       <a
-                        href={url}
-                        target="_blank"
-                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
-                        rel="noreferrer">
+                        href={JOIN_SLACK}
+                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                         <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                            <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                            <svg
+                              viewBox="0 0 2447.6 2452.5"
+                              className="h-6 w-6"
+                              xmlns="http://www.w3.org/2000/svg">
+                              <g clipRule="evenodd" fillRule="evenodd">
+                                <path
+                                  d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                                <path
+                                  d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                                <path
+                                  d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                                <path
+                                  d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+                                  fill="rgba(55, 65, 81)"
+                                />
+                              </g>
+                            </svg>
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                              <span className="focus:outline-none">
-                                <span className="absolute inset-0" aria-hidden="true" />
-                                {t("register")} <strong className="text-green-500">{username}</strong>
-                              </span>
+                          <h3 className="text-emphasis text-base font-medium">
+                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-empthasis focus-within:ring-offset-2">
+                              <span className="absolute inset-0" aria-hidden="true" />
+                              Slack
                             </span>
                           </h3>
-                          <p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
+                          <p className="text-subtle text-base">{t("join_our_community")}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </a>
                     </li>
                   </ul>
-                )}
-
-                <ul role="list" className="mt-4 divide-y divide-gray-200 border-gray-200">
-                  {links.map((link, linkIdx) => (
-                    <li key={linkIdx} className="px-4 py-2">
-                      <Link
-                        href={link.href}
-                        className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                        <div className="flex-shrink-0">
-                          <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                            <link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
-                          </span>
-                        </div>
-                        <div className="min-w-0 flex-1">
-                          <h3 className="text-base font-medium text-gray-900">
-                            <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                              <span className="absolute inset-0" aria-hidden="true" />
-                              {link.title}
-                            </span>
-                          </h3>
-                          <p className="text-base text-gray-500">{link.description}</p>
-                        </div>
-                        <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                        </div>
-                      </Link>
-                    </li>
-                  ))}
-                  <li className="px-4 py-2">
-                    <a
-                      href={JOIN_SLACK}
-                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                      <div className="flex-shrink-0">
-                        <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                          <svg
-                            viewBox="0 0 2447.6 2452.5"
-                            className="h-6 w-6"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <g clipRule="evenodd" fillRule="evenodd">
-                              <path
-                                d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                                fill="rgba(55, 65, 81)"
-                              />
-                            </g>
-                          </svg>
-                        </span>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h3 className="text-base font-medium text-gray-900">
-                          <span className="rounded-sm focus-within:ring-2 focus-within:ring-gray-500 focus-within:ring-offset-2">
-                            <span className="absolute inset-0" aria-hidden="true" />
-                            Slack
-                          </span>
-                        </h3>
-                        <p className="text-base text-gray-500">{t("join_our_community")}</p>
-                      </div>
-                      <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                      </div>
-                    </a>
-                  </li>
-                </ul>
-                <div className="mt-8">
-                  <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
-                    {t("or_go_back_home")}
-                    <span aria-hidden="true"> &rarr;</span>
-                  </Link>
+                  <div className="mt-8">
+                    <Link href="/" className="hover:text-subtle text-emphasis text-base font-medium">
+                      {t("or_go_back_home")}
+                      <span aria-hidden="true"> &rarr;</span>
+                    </Link>
+                  </div>
                 </div>
-              </div>
+              </>
             </>
           )}
         </main>

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

apps/web/pages/[user].tsx

@@ -49,8 +49,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
   const groupEventTypes = props.users.some((user) => !user.allowDynamicBooking) ? (
     <div className="space-y-6" data-testid="event-types">
       <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-        <div className="p-8 text-center text-gray-400 dark:text-white">
-          <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">{" " + t("unavailable")}</h2>
+        <div className="p-8 text-center text-muted dark:text-inverted">
+          <h2 className="font-cal mb-2 text-3xl text-default dark:text-inverted">{" " + t("unavailable")}</h2>
           <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
         </div>
       </div>
@@ -60,14 +60,14 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
-          <FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+          className="dark:bg-darkgray-100 dark:border-darkgray-300 group relative border-b border-subtle bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted">
+          <FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
             className="flex justify-between px-6 py-4"
             data-testid="event-type-link">
             <div className="flex-shrink">
-              <p className="dark:text-darkgray-700 text-sm font-semibold text-gray-900">{type.title}</p>
+              <p className="dark:text-darkgray-700 text-sm font-semibold text-emphasis">{type.title}</p>
               <EventTypeDescription className="text-sm" eventType={type} />
             </div>
             <div className="mt-1 self-center">
@@ -130,23 +130,23 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
             isEmbed
-              ? " border-bookinglightest  dark:bg-darkgray-50 rounded-md border bg-white sm:dark:border-gray-600"
+              ? " border-bookinglightest  dark:bg-darkgray-50 rounded-md border bg-default sm:dark:border-empthasis"
               : "",
             "max-w-3xl py-24 px-4"
           )}>
           {isSingleUser && ( // When we deal with a single user, not dynamic group
             <div className="mb-8 text-center">
               <Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
-              <h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
+              <h1 className="font-cal mb-1 text-3xl text-emphasis dark:text-inverted">
                 {nameOrUsername}
                 {user.verified && (
-                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
+                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-inverted" />
                 )}
               </h1>
               {!isBioEmpty && (
                 <>
                   <div
-                    className=" dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    className=" dark:text-darkgray-600 text-sm text-subtle [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
                   />
                 </>
@@ -156,13 +156,13 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
           <div
             className={classNames(
               "rounded-md ",
-              !isEventListEmpty && "dark:border-darkgray-300 border border-gray-200"
+              !isEventListEmpty && "dark:border-darkgray-300 border border-subtle"
             )}
             data-testid="event-types">
             {user.away ? (
               <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-                <div className="p-8 text-center text-gray-400 dark:text-white">
-                  <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+                <div className="p-8 text-center text-muted dark:text-inverted">
+                  <h2 className="font-cal mb-2 text-3xl text-default dark:text-inverted">
                     😴{" " + t("user_away")}
                   </h2>
                   <p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
@@ -175,8 +175,8 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
-                  <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+                  className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-subtle bg-default first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-muted
+                  <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-emphasis opacity-0 transition-opacity group-hover:opacity-100 dark:text-inverted" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <div className="block w-full p-5">
                     <Link
@@ -193,7 +193,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                       }}
                       data-testid="event-type-link">
                       <div className="flex flex-wrap items-center">
-                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
+                        <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-default">
                           {type.title}
                         </h2>
                       </div>

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>

apps/web/pages/[user]/book.tsx

@@ -34,12 +34,12 @@ export type BookPageProps = inferSSRProps<typeof getServerSideProps>;
 export default function Book(props: BookPageProps) {
   const { t } = useLocale();
   return props.away ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted text-default mb-2 text-3xl">
                 😴{" " + t("user_away")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_away_description")}</p>
@@ -49,12 +49,12 @@ export default function Book(props: BookPageProps) {
       </main>
     </div>
   ) : props.isDynamicGroupBooking && !props.profile.allowDynamicBooking ? (
-    <div className="h-screen dark:bg-gray-900">
+    <div className="dark:bg-inverted h-screen">
       <main className="mx-auto max-w-3xl px-4 py-24">
         <div className="space-y-6" data-testid="event-types">
           <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="p-8 text-center text-gray-400 dark:text-white">
-              <h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
+            <div className="text-muted dark:text-inverted p-8 text-center">
+              <h2 className="font-cal dark:text-inverted text-default mb-2 text-3xl">
                 {" " + t("unavailable")}
               </h2>
               <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>

apps/web/pages/_document.tsx

@@ -46,7 +46,7 @@ class MyDocument extends Document<Props> {
         </Head>
 
         <body
-          className="dark:bg-darkgray-50 desktop-transparent bg-gray-100 antialiased"
+          className="dark:bg-darkgray-50 desktop-transparent bg-subtle antialiased"
           style={
             isEmbed
               ? {

apps/web/pages/apps/[slug]/setup.tsx

@@ -11,7 +11,7 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
   const { status } = useSession();
 
   if (status === "loading") {
-    return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
+    return <div className="absolute z-50 flex h-screen w-full items-center bg-emphasis" />;
   }
 
   if (status === "unauthenticated") {

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>

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>

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"

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="rounded-md border border-subtle p-7">
             <ShellSubHeading
               title={t(variant || "other")}
               subtitle={t(`installed_app_${variant || "other"}_description`)}

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>

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>

apps/web/pages/auth/forgot-password/index.tsx

@@ -96,7 +96,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
       footerText={
         !success && (
           <>
-            <Link href="/auth/login" className="font-medium text-gray-900">
+            <Link href="/auth/login" className="text-emphasis font-medium">
               {t("back_to_signin")}
             </Link>
           </>

apps/web/pages/auth/login.tsx

@@ -158,7 +158,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>

apps/web/pages/auth/logout.tsx

@@ -31,15 +31,15 @@ export default function Logout(props: Props) {
   return (
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
       <div className="mb-4">
-        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+        <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
           <FiCheck className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
-          <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
             {t("youve_been_logged_out")}
           </h3>
           <div className="mt-2">
-            <p className="text-sm text-gray-500">{t("hope_to_see_you_soon")}</p>
+            <p className="text-subtle text-sm">{t("hope_to_see_you_soon")}</p>
           </div>
         </div>
       </div>

apps/web/pages/auth/setup/index.tsx

@@ -103,7 +103,7 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
           id={`wizard-step-${currentStep}`}
           name={`wizard-step-${currentStep}`}
           classNames={{
-            form: "mb-4 rounded-md bg-white px-0 pt-0 md:max-w-full",
+            form: "mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full",
             appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
             verticalTabsItem: "!w-48 md:p-4",
           }}
@@ -121,7 +121,7 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
   return (
     <>
       <Meta title={t("setup")} description={t("setup_description")} />
-      <main className="flex items-center bg-gray-100 print:h-full md:h-screen">
+      <main className="flex items-center bg-subtle print:h-full md:h-screen">
         <WizardForm
           href="/auth/setup"
           steps={steps}

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>
 

apps/web/pages/availability/[schedule].tsx

@@ -53,7 +53,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
   const { t } = useLocale();
   return (
     <div className="p-6">
-      <h3 className="font-medium leading-6 text-gray-900">
+      <h3 className="text-emphasis font-medium leading-6">
         {t("date_overrides")}{" "}
         <Tooltip content={t("date_overrides_info")}>
           <span className="inline-block">
@@ -61,7 +61,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
           </span>
         </Tooltip>
       </h3>
-      <p className="mb-4 text-sm text-gray-500">{t("date_overrides_subtitle")}</p>
+      <p className="text-subtle mb-4 text-sm">{t("date_overrides_subtitle")}</p>
       <div className="space-y-2">
         <DateOverrideList
           excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
@@ -180,7 +180,7 @@ export default function Availability() {
       }
       CTA={
         <div className="flex items-center justify-end">
-          <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
+          <div className="sm:hover:bg-subtle flex items-center rounded-md px-2">
             <Skeleton
               as={Label}
               htmlFor="hiddenSwitch"
@@ -217,7 +217,7 @@ export default function Availability() {
 
           <VerticalDivider />
 
-          <div className="border-l-2 border-gray-300" />
+          <div className="border-default border-l-2" />
           <Button className="ml-4 lg:ml-0" type="submit" form="availability-form">
             {t("save")}
           </Button>
@@ -259,7 +259,7 @@ export default function Availability() {
           <div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
             <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
               <div>
-                <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="timeZone" className="text-default block text-sm font-medium">
                   {t("timezone")}
                 </label>
                 <Controller
@@ -268,7 +268,7 @@ export default function Availability() {
                     value ? (
                       <TimezoneSelect
                         value={value}
-                        className="focus:border-brand mt-1 block w-72 rounded-md border-gray-300 text-sm"
+                        className="focus:border-brand-default border-default mt-1 block w-72 rounded-md text-sm"
                         onChange={(timezone) => onChange(timezone.value)}
                       />
                     ) : (
@@ -279,7 +279,7 @@ export default function Availability() {
               </div>
               <hr className="my-6 mr-8" />
               <div className="hidden rounded-md md:block">
-                <h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
+                <h3 className="text-emphasis text-sm font-medium">{t("something_doesnt_look_right")}</h3>
                 <div className="mt-3 flex">
                   <Button href="/availability/troubleshoot" color="secondary">
                     {t("launch_troubleshooter")}

apps/web/pages/availability/index.tsx

@@ -82,7 +82,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
           />
         </div>
       ) : (
-        <div className="mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
+        <div className="mb-16 overflow-hidden rounded-md border border-subtle bg-default">
           <ul className="divide-y divide-gray-200" data-testid="schedules" ref={animationParentRef}>
             {schedules.map((schedule) => (
               <ScheduleListItem

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>
             );
           })()}

apps/web/pages/booking/[uid].tsx

@@ -130,7 +130,7 @@ function RedirectionToast({ url }: { url: string }) {
           <div className="border border-green-600 bg-green-500 p-2 sm:p-3">
             <div className="flex flex-wrap items-center justify-between">
               <div className="flex w-0 flex-1 items-center">
-                <p className="truncate font-medium text-white sm:mx-3">
+                <p className="text-inverted truncate font-medium sm:mx-3">
                   <span className="md:hidden">Redirecting to {url} ...</span>
                   <span className="hidden md:inline">
                     {t("you_are_being_redirected", { url, seconds: timeRemaining })}
@@ -144,7 +144,7 @@ function RedirectionToast({ url }: { url: string }) {
                       redirectToExternalUrl(urlWithSuccessParamsRef.current);
                     }
                   }}
-                  className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
+                  className="bg-default flex w-full items-center justify-center rounded-sm border border-transparent px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
                   {t("continue")}
                 </button>
               </div>
@@ -155,7 +155,7 @@ function RedirectionToast({ url }: { url: string }) {
                     setIsToastVisible(false);
                   }}
                   className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
-                  <FiX className="h-6 w-6 text-white" />
+                  <FiX className="text-inverted h-6 w-6" />
                 </button>
               </div>
             </div>
@@ -376,7 +376,7 @@ export default function Success(props: SuccessProps) {
         <div className="mt-2 ml-4 -mb-4">
           <Link
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
-            className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-transparent dark:hover:text-white">
+            className="hover:bg-subtle text-subtle dark:hover:text-inverted 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>
@@ -400,7 +400,7 @@ export default function Success(props: SuccessProps) {
               <div
                 className={classNames(
                   "main inline-block transform overflow-hidden rounded-lg border sm:my-8 sm:max-w-xl",
-                  isBackgroundTransparent ? "" : "dark:bg-darkgray-100 dark:border-darkgray-200 bg-white",
+                  isBackgroundTransparent ? "" : "dark:bg-darkgray-100 dark:border-darkgray-200 bg-default",
                   "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
                 )}
                 role="dialog"
@@ -410,12 +410,12 @@ export default function Success(props: SuccessProps) {
                   className={classNames(
                     "mx-auto flex items-center justify-center",
                     !giphyImage && !isCancelled && !needsConfirmation
-                      ? "h-12 w-12 rounded-full bg-green-100"
+                      ? "bg-success h-12 w-12 rounded-full"
                       : "",
                     !giphyImage && !isCancelled && needsConfirmation
-                      ? "h-12 w-12 rounded-full bg-gray-100"
+                      ? "bg-subtle h-12 w-12 rounded-full"
                       : "",
-                    isCancelled ? "h-12 w-12 rounded-full bg-red-100" : ""
+                    isCancelled ? "bg-error h-12 w-12 rounded-full" : ""
                   )}>
                   {giphyImage && !needsConfirmation && (
                     // eslint-disable-next-line @next/next/no-img-element
@@ -424,12 +424,12 @@ export default function Success(props: SuccessProps) {
                   {!giphyImage && !needsConfirmation && !isCancelled && (
                     <FiCheck className="h-5 w-5 text-green-600" />
                   )}
-                  {needsConfirmation && !isCancelled && <FiCalendar className="h-5 w-5 text-gray-900" />}
+                  {needsConfirmation && !isCancelled && <FiCalendar className="text-emphasis h-5 w-5" />}
                   {isCancelled && <FiX className="h-5 w-5 text-red-600" />}
                 </div>
                 <div className="mt-6 mb-8 text-center last:mb-0">
                   <h3
-                    className="text-2xl font-semibold leading-6 text-gray-900 dark:text-white"
+                    className="text-emphasis dark:text-inverted text-2xl font-semibold leading-6"
                     data-testid={isCancelled ? "cancelled-headline" : ""}
                     id="modal-headline">
                     {needsConfirmation && !isCancelled
@@ -443,7 +443,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 dark:text-gray-300">{getTitle()}</p>
                   </div>
                   {props.paymentStatus &&
                     (bookingInfo.status === BookingStatus.CANCELLED ||
@@ -532,10 +532,10 @@ export default function Success(props: SuccessProps) {
                               href={locationToDisplay}
                               target="_blank"
                               title={locationToDisplay}
-                              className="flex items-center gap-2 text-gray-700 underline dark:text-gray-50"
+                              className="text-default flex items-center gap-2 underline dark:text-gray-50"
                               rel="noreferrer">
                               {providerName || "Link"}
-                              <FiExternalLink className="inline h-4 w-4 text-gray-700 dark:text-white" />
+                              <FiExternalLink className="text-default dark:text-inverted inline h-4 w-4" />
                             </a>
                           ) : (
                             locationToDisplay
@@ -586,12 +586,12 @@ export default function Success(props: SuccessProps) {
                     <>
                       <hr className="border-bookinglightest dark:border-darkgray-300 mb-8" />
                       <div className="text-center last:pb-0">
-                        <span className="text-gray-900 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                        <span className="text-emphasis ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                           {t("need_to_make_a_change")}
                         </span>
 
                         {!props.recurringBookings && (
-                          <span className="text-bookinglight inline text-gray-700">
+                          <span className="text-bookinglight text-default inline">
                             <span className="underline">
                               <Link href={`/reschedule/${bookingInfo?.uid}`} legacyBehavior>
                                 {t("reschedule")}
@@ -604,7 +604,7 @@ export default function Success(props: SuccessProps) {
                         <button
                           data-testid="cancel"
                           className={classNames(
-                            "text-bookinglight text-gray-700 underline",
+                            "text-bookinglight text-default underline",
                             props.recurringBookings && "ltr:mr-2 rtl:ml-2"
                           )}
                           onClick={() => setIsCancellationMode(true)}>
@@ -634,7 +634,7 @@ export default function Success(props: SuccessProps) {
                     <>
                       <hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
                       <div className="text-bookingdark align-center flex flex-row justify-center pt-8">
-                        <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                        <span className="text-default flex self-center font-medium ltr:mr-2 rtl:ml-2 dark:text-gray-50">
                           {t("add_to_calendar")}
                         </span>
                         <div className="justify-left mt-1 flex text-left sm:mt-0">
@@ -656,7 +656,7 @@ export default function Success(props: SuccessProps) {
                                   encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
                                 : "")
                             }
-                            className="h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-gray-700 dark:text-white">
+                            className="dark:text-inverted h-10 w-10 rounded-sm border border-subtle px-3 py-2 ltr:mr-2 rtl:ml-2 dark:border-empthasis">
                             <svg
                               className="-mt-1.5 inline-block h-4 w-4"
                               fill="currentColor"
@@ -682,7 +682,7 @@ export default function Success(props: SuccessProps) {
                                 ? "&location=" + encodeURIComponent(locationVideoCallUrl)
                                 : "")
                             }
-                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
+                            className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-subtle px-3 py-2 dark:border-empthasis"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -709,7 +709,7 @@ export default function Success(props: SuccessProps) {
                                 ? "&location=" + encodeURIComponent(locationVideoCallUrl)
                                 : "")
                             }
-                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
+                            className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-subtle px-3 py-2 dark:border-empthasis"
                             target="_blank">
                             <svg
                               className="mr-1 -mt-1.5 inline-block h-4 w-4"
@@ -722,7 +722,7 @@ export default function Success(props: SuccessProps) {
                           </Link>
                           <Link
                             href={"data:text/calendar," + eventLink()}
-                            className="mx-2 h-10 w-10 rounded-sm border border-gray-200 px-3 py-2 dark:border-gray-700 dark:text-white"
+                            className="dark:text-inverted mx-2 h-10 w-10 rounded-sm border border-subtle px-3 py-2 dark:border-empthasis"
                             download={props.eventType.title + ".ics"}>
                             <svg
                               version="1.1"
@@ -741,7 +741,7 @@ export default function Success(props: SuccessProps) {
                 {session === null && !(userIsOwner || props.hideBranding) && (
                   <>
                     <hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
-                    <div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 pt-8 text-center text-xs dark:text-white">
+                    <div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 dark:text-inverted pt-8 text-center text-xs">
                       <a href="https://cal.com/signup">
                         {t("create_booking_link_with_calcom", { appName: APP_NAME })}
                       </a>
@@ -759,7 +759,7 @@ export default function Success(props: SuccessProps) {
                           name="email"
                           id="email"
                           defaultValue={email}
-                          className="mr- focus:border-brand border-bookinglightest dark:border-darkgray-300 mt-0 block w-full rounded-none rounded-l-md border-gray-300 shadow-sm focus:ring-black dark:bg-black dark:text-white sm:text-sm"
+                          className="mr- focus:border-brand-default border-bookinglightest dark:border-darkgray-300 border-default dark:text-inverted mt-0 block w-full rounded-none rounded-l-md shadow-sm focus:ring-black dark:bg-black sm:text-sm"
                           placeholder="rick.astley@cal.com"
                         />
                         <Button

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="overflow-hidden rounded-md border border-subtle">
                   <table className="w-full max-w-full table-fixed">
-                    <tbody className="divide-y divide-gray-200 bg-white" data-testid="today-bookings">
+                    <tbody className="bg-default divide-y divide-gray-200" data-testid="today-bookings">
                       <Fragment>
                         {bookingsToday.map((booking: BookingOutput) => (
                           <BookingListItem
@@ -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="overflow-hidden rounded-md border border-subtle">
                 <table className="w-full max-w-full table-fixed">
-                  <tbody className="divide-y divide-gray-200 bg-white" data-testid="bookings">
+                  <tbody className="bg-default divide-y divide-gray-200" data-testid="bookings">
                     {query.data.pages.map((page, index) => (
                       <Fragment key={index}>
                         {page.bookings.filter(filterBookings).map((booking: BookingOutput) => {

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>
@@ -357,7 +357,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           </Badge>
                         )}
                         <Tooltip content={t("show_eventtype_on_profile")}>
-                          <div className="self-center rounded-md p-2 hover:bg-gray-200">
+                          <div className="self-center rounded-md p-2">
                             <Switch
                               name="Hidden"
                               checked={!type.hidden}
@@ -585,11 +585,11 @@ const EventTypeListHeading = ({
       <div>
         <Link
           href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
-          className="font-bold">
+          className="text-emphasis font-bold">
           {profile?.name || ""}
         </Link>
         {membershipCount && teamId && (
-          <span className="relative -top-px text-xs text-gray-500 ltr:ml-2 ltr:mr-2 rtl:ml-2">
+          <span className="text-subtle relative -top-px text-xs ltr:ml-2 ltr:mr-2 rtl:ml-2">
             <Link href={`/settings/teams/${teamId}/members`}>
               <Badge variant="gray">
                 <FiUsers className="mr-1 -mt-px inline h-3 w-3" />
@@ -599,7 +599,7 @@ const EventTypeListHeading = ({
           </span>
         )}
         {profile?.slug && (
-          <Link href={`${CAL_URL}/${profile.slug}`} className="block text-xs text-gray-500">
+          <Link href={`${CAL_URL}/${profile.slug}`} className="text-subtle block text-xs">
             {`${CAL_URL?.replace("https://", "")}/${profile.slug}`}
           </Link>
         )}

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>
                 ))}

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>

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>
   );

apps/web/pages/settings/billing/index.tsx

@@ -26,7 +26,7 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
         </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" />
     </>
   );
 };

apps/web/pages/settings/my-account/appearance.tsx

@@ -94,7 +94,7 @@ const AppearanceView = () => {
       <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">
@@ -121,11 +121,11 @@ const AppearanceView = () => {
         />
       </div>
 
-      <hr className="my-8 border border-gray-200" />
+      <hr className="my-8 border border-subtle" />
       <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 mt-0.5 leading-5">{t("customize_your_brand_colors")}</p>
         </div>
       </div>
 
@@ -136,7 +136,7 @@ const AppearanceView = () => {
           defaultValue={user.brandColor}
           render={() => (
             <div>
-              <p className="mb-2 block text-sm font-medium text-gray-900">{t("light_brand_color")}</p>
+              <p className="text-emphasis mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.brandColor}
                 onChange={(value) => formMethods.setValue("brandColor", value, { shouldDirty: true })}
@@ -150,7 +150,7 @@ const AppearanceView = () => {
           defaultValue={user.darkBrandColor}
           render={() => (
             <div className="mt-6 sm:mt-0">
-              <p className="mb-2 block text-sm font-medium text-gray-900">{t("dark_brand_color")}</p>
+              <p className="text-emphasis mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.darkBrandColor}
                 onChange={(value) => formMethods.setValue("darkBrandColor", value, { shouldDirty: true })}
@@ -167,7 +167,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="my-8 border border-subtle" />
       <Controller
         name="hideBranding"
         control={formMethods.control}
@@ -182,7 +182,7 @@ const AppearanceView = () => {
                   </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

apps/web/pages/settings/my-account/calendars.tsx

@@ -84,17 +84,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]">
+              <div className="bg-muted mt-4 flex space-x-4 rounded-md border-subtle p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
+                <div className=" bg-default flex h-9 w-9 items-center justify-center rounded-md border-2 border-subtle p-[6px]">
                   <FiCalendar className="h-6 w-6" />
                 </div>
 
                 <div className="flex w-full flex-col space-y-3">
                   <div>
-                    <h4 className=" pb-2 text-base font-semibold leading-5 text-black">
+                    <h4 className=" text-emphasis pb-2 text-base font-semibold leading-5">
                       {t("add_to_calendar")}
                     </h4>
-                    <p className=" text-sm leading-5 text-gray-600">
+                    <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 +109,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 +131,7 @@ const CalendarsView = () => {
                               trashIcon
                               onSuccess={() => query.refetch()}
                               buttonProps={{
-                                className: "border border-gray-300 py-[2px]",
+                                className: "border border-default py-[2px]",
                                 color: "secondary",
                               }}
                             />
@@ -167,12 +167,12 @@ const CalendarsView = () => {
                             <DisconnectIntegration
                               trashIcon
                               credentialId={item.credentialId}
-                              buttonProps={{ className: "border border-gray-300" }}
+                              buttonProps={{ className: "border border-default" }}
                             />
                           </div>
                         </div>
-                        <div className="w-full border-t border-gray-200">
-                          <p className="px-2 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                        <div className="w-full border-t border-subtle">
+                          <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