From 114877180e1178431a0ae0422ad6da52cc6d8ec2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 12 Aug 2026 08:08:49 +0000
Subject: [PATCH] Fix landing hero text contrast in dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hero section sits on fixed light lavender/pink brand artwork, but its
text used theme tokens — in dark mode 'Welcome to', the subheadline, the
Sign In outline button, and the trust row went near-white and washed out
against the light backdrop. Pin those specific styles to dark ink since
their background never changes with the theme.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011nrgpkJbvZ9JCf2VA2kKvJ
---
 apps/client/app/index.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/client/app/index.tsx b/apps/client/app/index.tsx
index 27388ae..e9d2353 100644
--- a/apps/client/app/index.tsx
+++ b/apps/client/app/index.tsx
@@ -580,7 +580,10 @@ const createStyles = (colors: AppPalette, fontScale: number) =>
   headline: {
     fontSize: 72 * fontScale,
     fontWeight: '800',
-    color: colors.textPrimary,
+    // The hero sits on the fixed light lavender/pink brand artwork, so its
+    // text must stay dark in every theme (theme tokens would go light in
+    // dark mode and vanish against the artwork)
+    color: '#1A1A2E',
     textAlign: 'center',
     marginBottom: 8,
     letterSpacing: -2,
@@ -601,7 +604,7 @@ const createStyles = (colors: AppPalette, fontScale: number) =>
   },
   subheadline: {
     fontSize: 22 * fontScale,
-    color: colors.textSecondary,
+    color: '#4B5563', // fixed: sits on the light hero artwork in every theme
     textAlign: 'center',
     marginBottom: 48,
     lineHeight: 34,
@@ -651,10 +654,10 @@ const createStyles = (colors: AppPalette, fontScale: number) =>
     minWidth: 180,
     alignItems: 'center',
     borderWidth: 2,
-    borderColor: colors.border,
+    borderColor: '#1A1A2E', // fixed: sits on the light hero artwork in every theme
   },
   secondaryButtonText: {
-    color: colors.textPrimary,
+    color: '#1A1A2E', // fixed: sits on the light hero artwork in every theme
     fontSize: 18 * fontScale,
     fontWeight: '600',
   },
@@ -675,7 +678,7 @@ const createStyles = (colors: AppPalette, fontScale: number) =>
     fontWeight: 'bold',
   },
   trustText: {
-    color: colors.textSecondary,
+    color: '#4B5563', // fixed: sits on the light hero artwork in every theme
     fontSize: 15 * fontScale,
     fontWeight: '500',
   },