docs: add visual design QA checklist to test plan

2026-06-18 14:25:20 +02:00
parent 1addbc294f
commit bbcea0094c
1 changed files with 70 additions and 0 deletions
@@ -556,3 +556,73 @@ The slug is built from `date(Y-m-d-Hi)` + title lowercased with `[^a-z0-9]+` rep
 **Manual verification required:** Open browser DevTools

 ---
+
+## Visual Design QA — Redesign Checklist
+
+**Design spec:** `user/docs/design/design-spec.md`  
+**Implementation plan:** `user/docs/superpowers/plans/2026-06-18-ui-redesign.md`
+
+### Typography
+- [ ] DM Serif Display loads for: entry titles, page headings (`h1`), stat numbers, site title
+- [ ] DM Sans loads for: body text, nav links, labels, form fields, timestamps
+- [ ] No fallback font (Georgia / system-sans) visible in place of custom fonts
+- [ ] Body text font-size ≥ 16px (no iOS zoom on form focus)
+
+### Colors
+- [ ] Page background is warm paper (#F7F5F2), not pure white
+- [ ] All links and CTAs use teal (#1F6B5A), not blue (#0066cc)
+- [ ] Active nav link is teal and bold
+- [ ] Map markers and route polylines are teal
+
+### Header
+- [ ] 3px teal border-top visible at top of header
+- [ ] Site title renders in DM Serif Display ("into the east")
+- [ ] Header sticks to top on scroll
+- [ ] On 320px viewport: title and nav both visible without overlap
+
+### Entry feed cards
+- [ ] Cards with photos show full-bleed 16:9 image with rounded corners
+- [ ] Date + location text overlay visible on gradient at bottom of photo
+- [ ] Entry title below photo in DM Serif Display
+- [ ] Subtle photo scale animation on hover (desktop)
+- [ ] Cards without photos show date/location meta row above title
+- [ ] "Read entry →" link is teal
+
+### Single entry page
+- [ ] If entry has photos: hero image spans full content width, max 480px tall
+- [ ] Entry title in DM Serif Display at large size (~48px desktop)
+- [ ] Thin border rule separates header from body text
+- [ ] Body text at 18px (--text-md)
+- [ ] "← Back to journal" footer link in teal
+
+### Post form
+- [ ] Lat/lng inputs NOT visible (hidden by CSS :has() selector)
+- [ ] Inputs have rounded corners and correct border
+- [ ] Focus ring on inputs is teal, not default browser blue
+- [ ] "Post Entry" submit button is teal, full-width, ≥52px height
+- [ ] After tapping "Get Location": status line shows "✓ Location captured · lat, lng" in teal
+- [ ] After tapping "Get Weather": status line shows "✓ Weather set · desc · temp°C" in teal
+- [ ] On error: status line shows in brick red, not teal
+
+### Stats page
+- [ ] Page heading "Trip Statistics" in DM Serif Display
+- [ ] Stat numbers in DM Serif Display, teal color
+- [ ] Stat cards on white background (not paper), with subtle shadow
+- [ ] Labels uppercase, muted gray, small
+
+### Map page
+- [ ] Map fills viewport below header with no gap
+- [ ] Map container height uses CSS variable (not hardcoded 61px)
+- [ ] Markers are teal circles (not blue)
+- [ ] Route polyline is teal
+
+### Mobile (375px viewport)
+- [ ] All pages scroll without horizontal overflow
+- [ ] Header title and nav fit in one row
+- [ ] Entry card photo fills full width
+- [ ] Post form buttons are thumb-reachable (44px+ targets)
+- [ ] Map page: map pans without page scrolling underneath (touch-action)
+
+### Accessibility
+- [ ] Focus ring visible on all interactive elements (keyboard navigation)
+- [ ] With prefers-reduced-motion: no animations/transitions fire