fix(design): Replace monospace font with system font stack on login page

[Lexicoding-systems]

Summary

Fixes login page typography by replacing unprofessional monospace font with modern system font stack, matching the dashboard design system.

Issue Fixed

Closes #20: Fix login page typography

Changes Made

Typography Updates

Before: Monaco, Courier New, monospace (all text)
After: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif

Updated elements:

• Body text (line 29)
• Form inputs (line 85) - now uses font-family: inherit
• Buttons (line 106) - now uses font-family: inherit

Design System Integration

Added CSS variables matching dashboard files:

:root {
    --primary: #0891b2;
    --secondary: #64748b;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --bg-dark: #0f172a;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --verified: #10b981;
}

Color Token Updates

Replaced 10+ hardcoded colors with CSS variables:

• color: #0891b2; → color: var(--primary);
• color: #94a3b8; → color: var(--text-secondary);
• color: #f1f5f9; → color: var(--text-primary);
• background: #1e293b; → background: var(--bg-card);
• border: 1px solid #334155; → border: 1px solid var(--border);
• And more...

Benefits

• ✅ Professional appearance: Modern system font instead of monospace
• ✅ Consistent branding: Matches dashboard typography
• ✅ Improved readability: Sans-serif more readable for UI text
• ✅ Design system: All 3 HTML files now use same color tokens
• ✅ Maintainability: Colors centralized in CSS variables

Before & After

Before:

• Monaco/Courier New monospace everywhere
• Hardcoded color values scattered throughout
• Inconsistent with dashboard design

After:

• System font stack (native to each OS)
• Centralized color system with CSS variables
• Consistent with dashboard.html and governance_dashboard.html

Testing Checklist

• Verify font renders correctly on macOS (San Francisco)
• Verify font renders correctly on Windows (Segoe UI)
• Verify font renders correctly on Linux (Roboto/Ubuntu)
• Check all colors still display correctly
• Verify form inputs and buttons look good
• Test login functionality still works

Related

• Part of Phase 2 (Accessibility & UX) from #25
• Follows fixes from [DESIGN] Standardize Color System Across All Dashboards #19 (colors), [DESIGN] Fix Spacing Inconsistencies in dashboard.html #21 (spacing), [CONFIG] Implement Environment Configuration System for API URLs #18 (config)
• Next: [UX] Implement Alert Batching Feature for Similar Escalations #22 (alert batching)

🤖 Generated with Claude Code