feat: US-010 - Fix minor typography inconsistencies

Ralph/prd.json

@@ -145,7 +145,7 @@
         "Typecheck passes"
       ],
       "priority": 9,
-      "passes": false,
+      "passes": true,
       "notes": "Search LoginScreen.tsx for all hex color values (#xxxxxx) and check whether a corresponding CSS custom property exists in index.css. Some colors were already tokenized in the previous login rework (US-003 of previous run) — verify which ones are still hardcoded. The button has multiple color states (default, hover, pressed) — check all three."
     },
     {
@@ -161,7 +161,7 @@
         "Typecheck passes"
       ],
       "priority": 10,
-      "passes": false,
+      "passes": true,
       "notes": "These are small inline style tweaks in LoginScreen.tsx. The labels, inputs, and button already use clamp() for responsive sizing — just adjust the mid-values. The connection indicator gap is in the flex container styling near the bottom of the component."
     },
     {

Ralph/progress.txt

@@ -28,6 +28,7 @@
 - --bg-dashboard: #F0F5F4 (warm sage content background)
 - --accent: #0D6E6E (teal primary)
 - --accent-hover: #0A8080
+- --accent-pressed: #085858
 - --accent-light: rgba(10,128,128,0.08)
 - --border: #D4E0DE (structural borders)
 - --border-card: #E4EDEB (card/inner borders)
@@ -156,3 +157,36 @@
   - The button has 18-space indentation vs 20-space for inputs — `replace_all` may not catch all instances if matching on indentation
   - The spinner (`borderRadius: '50%'`) and status indicator dot should NOT be changed — they're circles, not card elements
 ---
+
+## 2026-02-15 - US-009: Replace hardcoded colors with design tokens
+- Replaced all hardcoded hex colors in LoginScreen.tsx with CSS custom property references (`var()` with fallbacks)
+- Input text color: `#111827` → `var(--text-primary, #1A2B2A)`
+- Cursor/caret color: `#0D6E6E` → `var(--accent, #0D6E6E)` (2 instances)
+- Button backgrounds: `#0D6E6E` → `var(--accent)`, `#0A8080` → `var(--accent-hover)`, `#085858` → `var(--accent-pressed)`
+- Spinner border/top: `#E4EDEB` → `var(--border-light)`, `#0D6E6E` → `var(--accent)`
+- Input inactive borders: `#E4EDEB` → `var(--border-light)` (username + password fields)
+- Card border: `#E4EDEB` → `var(--border-light)`
+- Footer border: `#E4EDEB` → `var(--border-light)`
+- Connection status colors: `#059669` → `var(--success)`, `#DC2626` → `var(--alert)` (dot bg + text)
+- Focus ring: `ring-[#0D6E6E]/40` → `ring-accent/40` (Tailwind token)
+- Added `--accent-pressed: #085858` token to `index.css` `:root` (completes the accent state trio)
+- Files changed: `src/components/LoginScreen.tsx`, `src/index.css`
+- **Learnings for future iterations:**
+  - `#FFFFFF` on button text is intentional for contrast — no `--text-on-accent` token exists; leave as hardcoded white
+  - `rgba(240, 245, 244, 0.7)` overlay bg is `--bg-dashboard` at 70% opacity — no token for this; leave as rgba
+  - Status dot glow `boxShadow` uses rgba variants of success/alert colors at 40% opacity — no token for these glow effects
+  - Tailwind config has `accent` and `accent-hover` color tokens, so `ring-accent/40` works in class names
+  - Always add fallback values in `var()` references (e.g., `var(--accent, #0D6E6E)`) for resilience
+---
+
+## 2026-02-15 - US-010: Fix minor typography inconsistencies
+- Changed form label fontWeight from 500 to 600 (both Username and Password labels) to match dashboard card header weight convention
+- Adjusted input text fontSize mid-value from `clamp(13px, 1.1vw, 15px)` to `clamp(13px, 1.2vw, 15px)` — renders ~14-15px on standard viewports
+- Adjusted button text fontSize mid-value from `clamp(14px, 1.1vw, 16px)` to `clamp(14px, 1.2vw, 16px)` — renders ~15px on standard viewports
+- Changed connection status indicator gap from 6px to 8px (matching dashboard CardHeader gap)
+- Files changed: `src/components/LoginScreen.tsx`
+- **Learnings for future iterations:**
+  - These are all subtle alignment tweaks — the clamp mid-value change from 1.1vw to 1.2vw shifts rendering by ~1px on 1280px viewports
+  - The label fontWeight 600 matches the dashboard's `CardHeader` convention (seen in `Card.tsx`)
+  - The connection indicator gap of 8px matches the standard icon-text gap used in dashboard card headers
+---

src/components/LoginScreen.tsx

@@ -280,7 +280,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                     display: 'block',
                     fontFamily: "var(--font-ui)",
                     fontSize: 'clamp(12px, 1vw, 14px)',
-                    fontWeight: 500,
+                    fontWeight: 600,
                     color: 'var(--text-secondary, #5B7A78)',
                     marginBottom: '6px',
                   }}
@@ -292,7 +292,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                     width: '100%',
                     padding: '9px 11px',
                     fontFamily: "'Geist Mono', 'Fira Code', monospace",
-                    fontSize: 'clamp(13px, 1.1vw, 15px)',
+                    fontSize: 'clamp(13px, 1.2vw, 15px)',
                     backgroundColor: activeField === 'username' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
                     border: activeField === 'username' ? '1px solid var(--accent, #0D6E6E)' : '1px solid var(--border-light, #E4EDEB)',
                     borderRadius: 'var(--radius-sm, 6px)',
@@ -322,7 +322,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                     display: 'block',
                     fontFamily: "var(--font-ui)",
                     fontSize: 'clamp(12px, 1vw, 14px)',
-                    fontWeight: 500,
+                    fontWeight: 600,
                     color: 'var(--text-secondary, #5B7A78)',
                     marginBottom: '6px',
                   }}
@@ -334,7 +334,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                     width: '100%',
                     padding: '9px 11px',
                     fontFamily: "'Geist Mono', 'Fira Code', monospace",
-                    fontSize: 'clamp(13px, 1.1vw, 15px)',
+                    fontSize: 'clamp(13px, 1.2vw, 15px)',
                     backgroundColor: activeField === 'password' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
                     border: activeField === 'password' ? '1px solid var(--accent, #0D6E6E)' : '1px solid var(--border-light, #E4EDEB)',
                     borderRadius: 'var(--radius-sm, 6px)',
@@ -370,7 +370,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                   width: '100%',
                   padding: '10px 16px',
                   fontFamily: "var(--font-ui)",
-                  fontSize: 'clamp(14px, 1.1vw, 16px)',
+                  fontSize: 'clamp(14px, 1.2vw, 16px)',
                   fontWeight: 600,
                   color: '#FFFFFF',
                   backgroundColor: buttonBg,
@@ -390,7 +390,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  gap: '6px',
+                  gap: '8px',
                   marginTop: '4px',
                 }}
               >