diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index c2d9793072..09d0dcbd91 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -522,7 +522,7 @@ export function LogInOverlay(props: LogInOverlayProps) {
               <h4 className="text-base font-semibold text-black dark:text-white">
                 {t("sign_in_to_cal_com")}
               </h4>
-              <p className="text-sm text-[#6B7280] dark:text-gray-300">
+              <p className="text-sm text-gray-500 dark:text-gray-300">
                 {t("track_meetings_and_manage_schedule")}
               </p>
             </div>
diff --git a/companion/app/(tabs)/(event-types)/index.tsx b/companion/app/(tabs)/(event-types)/index.tsx
index 9543eea293..d966287e7b 100644
--- a/companion/app/(tabs)/(event-types)/index.tsx
+++ b/companion/app/(tabs)/(event-types)/index.tsx
@@ -617,8 +617,8 @@ export default function EventTypes() {
             <View>
               <AlertDialogText className="mb-2 text-sm font-medium">Title</AlertDialogText>
               <TextInput
-                className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
-                  titleError ? "border-red-500" : "border-[#D1D5DB]"
+                className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
+                  titleError ? "border-red-500" : "border-gray-300"
                 }`}
                 placeholder="Quick Chat"
                 placeholderTextColor="#9CA3AF"
@@ -668,10 +668,10 @@ export default function EventTypes() {
             >
               {/* Header */}
               <View className="px-8 pb-4 pt-6">
-                <Text className="mb-2 text-2xl font-semibold text-[#111827]">
+                <Text className="mb-2 text-2xl font-semibold text-gray-900">
                   Add a new event type
                 </Text>
-                <Text className="text-sm text-[#6B7280]">
+                <Text className="text-sm text-gray-500">
                   Set up event types to offer different types of meetings.
                 </Text>
               </View>
@@ -680,9 +680,9 @@ export default function EventTypes() {
               <View className="px-8 pb-6">
                 {/* Title */}
                 <View className="mb-4">
-                  <Text className="mb-2 text-sm font-medium text-[#374151]">Title</Text>
+                  <Text className="mb-2 text-sm font-medium text-gray-700">Title</Text>
                   <TextInput
-                    className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827] focus:border-black focus:ring-2 focus:ring-black"
+                    className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900 focus:border-black focus:ring-2 focus:ring-black"
                     placeholder="Quick Chat"
                     placeholderTextColor="#9CA3AF"
                     value={newEventTitle}
@@ -699,11 +699,11 @@ export default function EventTypes() {
               <View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
                 <View className="flex-row justify-end gap-2 space-x-2">
                   <TouchableOpacity
-                    className="rounded-xl border border-[#D1D5DB] bg-white px-4 py-2"
+                    className="rounded-xl border border-gray-300 bg-white px-4 py-2"
                     onPress={handleCloseCreateModal}
                     disabled={creating}
                   >
-                    <Text className="text-base font-medium text-[#374151]">Close</Text>
+                    <Text className="text-base font-medium text-gray-700">Close</Text>
                   </TouchableOpacity>
                   <TouchableOpacity
                     className={`rounded-xl bg-[#111827] px-4 py-2 ${creating ? "opacity-60" : ""}`}
diff --git a/companion/components/booking-list-screen/BookingListScreen.tsx b/companion/components/booking-list-screen/BookingListScreen.tsx
index eb84318110..f3713280ec 100644
--- a/companion/components/booking-list-screen/BookingListScreen.tsx
+++ b/companion/components/booking-list-screen/BookingListScreen.tsx
@@ -791,7 +791,7 @@ export const BookingListScreen: React.FC<BookingListScreenProps> = ({
             <View>
               <UIText className="mb-2 text-sm font-medium">Reason for cancellation</UIText>
               <TextInput
-                className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
+                className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
                 placeholder="Why are you cancelling?"
                 placeholderTextColor="#9CA3AF"
                 value={cancelReason}
diff --git a/companion/components/event-type-detail/tabs/AdvancedTab.tsx b/companion/components/event-type-detail/tabs/AdvancedTab.tsx
index 6170428589..d0918484f9 100644
--- a/companion/components/event-type-detail/tabs/AdvancedTab.tsx
+++ b/companion/components/event-type-detail/tabs/AdvancedTab.tsx
@@ -320,7 +320,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
                 className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
                   props.showAttendeeInfo
                     ? "border-[#111827] bg-[#111827]"
-                    : "border-[#D1D5DB] bg-white"
+                    : "border-gray-300 bg-white"
                 }`}
               >
                 {props.showAttendeeInfo && <Ionicons name="checkmark" size={14} color="#fff" />}
@@ -338,7 +338,7 @@ export function AdvancedTab(props: AdvancedTabProps) {
                 className={`mr-3 h-5 w-5 items-center justify-center rounded border ${
                   props.showAvailabilityCount
                     ? "border-[#111827] bg-[#111827]"
-                    : "border-[#D1D5DB] bg-white"
+                    : "border-gray-300 bg-white"
                 }`}
               >
                 {props.showAvailabilityCount ? (
diff --git a/companion/components/screens/AvailabilityListScreen.tsx b/companion/components/screens/AvailabilityListScreen.tsx
index c975cf7273..f1a0a72c83 100644
--- a/companion/components/screens/AvailabilityListScreen.tsx
+++ b/companion/components/screens/AvailabilityListScreen.tsx
@@ -396,8 +396,8 @@ export function AvailabilityListScreen({
             <View>
               <AlertDialogText className="mb-2 text-sm font-medium">Name</AlertDialogText>
               <TextInput
-                className={`rounded-md border bg-white px-3 py-2.5 text-base text-[#111827] ${
-                  nameError ? "border-red-500" : "border-[#D1D5DB]"
+                className={`rounded-md border bg-white px-3 py-2.5 text-base text-gray-900 ${
+                  nameError ? "border-red-500" : "border-gray-300"
                 }`}
                 placeholder="Working Hours"
                 placeholderTextColor="#9CA3AF"
@@ -452,15 +452,15 @@ export function AvailabilityListScreen({
             >
               {/* Header */}
               <View className="px-8 pb-4 pt-6">
-                <Text className="text-2xl font-semibold text-[#111827]">Add a new schedule</Text>
+                <Text className="text-2xl font-semibold text-gray-900">Add a new schedule</Text>
               </View>
 
               {/* Content */}
               <View className="px-8 pb-6">
                 <View className="mb-1">
-                  <Text className="mb-2 text-sm font-medium text-[#374151]">Name</Text>
+                  <Text className="mb-2 text-sm font-medium text-gray-700">Name</Text>
                   <TextInput
-                    className="rounded-md border border-[#D1D5DB] bg-white px-3 py-2.5 text-base text-[#111827]"
+                    className="rounded-md border border-gray-300 bg-white px-3 py-2.5 text-base text-gray-900"
                     placeholder="Working Hours"
                     placeholderTextColor="#9CA3AF"
                     value={newScheduleName}
@@ -477,14 +477,14 @@ export function AvailabilityListScreen({
               <View className="rounded-b-2xl border-t border-[#E5E7EB] bg-[#F9FAFB] px-8 py-4">
                 <View className="flex-row justify-end gap-2 space-x-2">
                   <AppPressable
-                    className="rounded-xl border border-[#D1D5DB] bg-white px-2 py-2 md:px-4"
+                    className="rounded-xl border border-gray-300 bg-white px-2 py-2 md:px-4"
                     onPress={() => {
                       onShowCreateModalChange(false);
                       setNewScheduleName("");
                     }}
                     disabled={creating}
                   >
-                    <Text className="text-base font-medium text-[#374151]">Close</Text>
+                    <Text className="text-base font-medium text-gray-700">Close</Text>
                   </AppPressable>
                   <AppPressable
                     className={`rounded-xl bg-[#111827] px-2 py-2 md:px-4 ${