feat(frontend): Mobile typography, spacing, and visual consistency audit — WCAG touch targets, contrast, rhythm

[ericsocrat]

Problem Statement

The audit identified multiple mobile visual consistency issues that span across the entire app rather than belonging to any single page:

1. Settings tap targets — may not meet WCAG 2.1 44×44px minimum on mobile (toggles, radio buttons, checkbox areas)
2. Font sizes at 320px — some text may be unreadably small or line-height too tight on narrow screens
3. Spacing inconsistencies — padding/margin varies between similar page sections across different routes
4. Dark mode contrast — some secondary text or borders may fail WCAG AA 4.5:1 contrast ratio
5. Touch target proximity — interactive elements too close together on mobile (e.g., adjacent links, small buttons)
6. Visual rhythm — inconsistent vertical spacing between page sections creates a disjointed feel
7. Score band colors — already centralized in utility but may not be consistent in all dark mode contexts
8. Icon sizes — Lucide icons may be too small on mobile (below 20×20px effective size)

Why This Matters

Average mobile consumers judge app quality on visual polish. Inconsistent spacing, tiny text, and hard-to-tap buttons communicate "unfinished" — regardless of how good the data is.

---

Audit Procedure

Step 1 — Systematic screenshot audit at 320px

Every route in the app shell, in both light and dark mode:

• Categories (list + [slug])
• Product detail ([id])
• Search + results
• Compare (empty + 2-product + 4-product)
• Scanner (idle + scanning)
• Lists (empty + populated)
• Settings (profile + preferences)
• Dashboard
• Learn Hub (all 7 topics)
• Recipe (list + detail)

Step 2 — Measure touch targets

// Target: all interactive elements ≥ 44×44px
// Check: buttons, links, toggles, radio buttons, checkboxes, tab items
// Tool: Playwright + getComputedStyle check or manual audit

Step 3 — Measure contrast ratios

// Tool: axe-playwright or manual Chrome DevTools audit
// Standard: WCAG 2.1 AA
// Normal text: 4.5:1 minimum
// Large text (≥18px or ≥14px bold): 3:1 minimum

Step 4 — Fix findings systematically

---

Mobile Typography Standards (Proposed)

Element	Mobile Size	Line Height	Weight
Page title (h1)	24px (1.5rem)	1.25	700
Section heading (h2)	20px (1.25rem)	1.3	600
Card title	16px (1rem)	1.4	600
Body text	14px (0.875rem)	1.5	400
Caption / meta	12px (0.75rem)	1.4	400
Score number	32px (2rem)	1.1	700
Badge text	11px (0.6875rem)	1.2	500

Spacing Scale (Proposed)

4px  (0.25rem) — inline element gap
8px  (0.5rem)  — tight component padding
12px (0.75rem) — standard component padding
16px (1rem)    — section separation (mobile)
24px (1.5rem)  — major section separation
32px (2rem)    — page section separation

---

Files Affected

Domain	Files
Settings	frontend/src/app/app/settings/**
All pages	Touch target and spacing audit across ~45 routes
Design system	frontend/docs/DESIGN_SYSTEM.md — update with standards
CSS tokens	frontend/src/styles/globals.css — spacing/type variables
Component tests	All impacted co-located *.test.tsx

---

Test Requirements

Vitest

• Components render within spacing constraints
• No text below minimum font size threshold

Playwright

• All pages at 320px — no horizontal overflow
• All pages at 320px — no text truncation hiding critical info
• Dark mode — all text meets WCAG AA contrast
• Touch targets — spot-check key interactive elements ≥ 44×44px

---

Verification Checklist

• cd frontend && npx tsc --noEmit — 0 errors
• cd frontend && npx vitest run — all tests pass
• cd frontend && npx playwright test --project=smoke — all pass
• Visual audit at 320px for all routes — no layout breaks
• Dark mode contrast verified via axe or manual check
• DESIGN_SYSTEM.md updated with typography/spacing standards
• CHANGELOG.md updated