diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 143e16a2dd..f841ec974c 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -131,6 +131,7 @@ export default function Login({
           "--cal-brand": "#111827",
           "--cal-brand-emphasis": "#101010",
           "--cal-brand-text": "white",
+          "--cal-brand-subtle": "#9CA3AF",
         } as CSSProperties
       }>
       <AuthContainer
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 0d80af7801..660517573b 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -88,6 +88,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
           "--cal-brand": "#111827",
           "--cal-brand-emphasis": "#101010",
           "--cal-brand-text": "white",
+          "--cal-brand-subtle": "#9CA3AF",
         } as CSSProperties
       }
       key={router.asPath}>
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index b8ce131b73..235e2cfb0f 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -80,6 +80,7 @@ export default function Signup({ prepopulateFormValues }: inferSSRProps<typeof g
             "--cal-brand": "#111827",
             "--cal-brand-emphasis": "#101010",
             "--cal-brand-text": "white",
+            "--cal-brand-subtle": "#9CA3AF",
           } as CSSProperties
         }
         aria-labelledby="modal-title"
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 3a50f71df6..a6e948e80e 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -73,12 +73,12 @@ const buttonClasses = cva(
       {
         disabled: true,
         color: "primary",
-        className: "bg-brand-subtle bg-opacity-30",
+        className: "bg-brand-subtle text-brand-subtle opacity-40",
       },
       {
         loading: true,
         color: "primary",
-        className: "bg-brand-default bg-opacity-30 text-brand-subtle",
+        className: "bg-brand-subtle text-brand-subtle",
       },
       // Secondary variants
       {