# Design QA — Cal.com-inspired family home

- Source visual truth: `C:\Users\19926\.codex\generated_images\01a04af9-0d32-7642-8148-1b73f4c8e2f3\exec-b564b19a-1b44-4198-93d0-166c8a00e356.png`
- Implementation evidence: `C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-implementation-v3-desktop.png`
- Combined comparison: `C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-design-qa-comparison.png`
- Responsive evidence: `C:\Users\19926\.codex\visualizations\2026\08\29\01a04af9-0d32-7642-8148-1b73f4c8e2f3\cal-implementation-narrow.png`
- Route/state: `/?designPreview=1`, signed-in visual preview state, first elder selected.
- CSS viewport: 1440 × 1024; device scale factor 1.
- Source pixels: 1488 × 1057. Implementation pixels: 1425 × 1024 (15 px vertical scrollbar reservation). The combined comparison normalizes both frames to 720 × 512 panels without changing their common ~1.407 aspect ratio.

## Full-view comparison evidence

The side-by-side comparison verifies the same 64 px top-navigation state, 46 px outer page margins, 7/5 primary-panel split, 480 px primary-panel height, three-person switcher, right-side elder summary, and grouped recent-activity surface. The implementation preserves the source's near-monochrome hierarchy, light borders, limited radius scale, and single black primary action.

## Focused-region comparison evidence

The source and implementation were also opened at original resolution. The header/navigation, person switcher, schedule timeline, elder summary, device row, recent conversation, primary action, and recent-activity rows are readable at full scale; no additional crop was required. Individual raster assets were inspected separately at 512 × 512 before being integrated.

## Required fidelity surfaces

- Fonts and typography: passed. Display headings use the Cal Sans-compatible geometric stack at weight 600 with negative tracking; body/UI copy uses Inter-compatible system text. Hierarchy and wrapping match the reference at the target viewport.
- Spacing and layout rhythm: passed. Header, page margins, switcher spacing, main panel ratio/height, row rhythm, radii, and recent section align with the reference. No heavy elevation remains.
- Colors and visual tokens: passed. The interface uses white, #111111, #374151, #6b7280, #e5e7eb, #f8f9fa, and #f5f5f5; primary actions are monochrome and no decorative gradients remain.
- Image quality and asset fidelity: passed. Three 512 px portrait assets and one 512 px speaker product asset replace generic placeholders and retain clarity in circular/40 px crops. Ant Design supplies standard UI icons.
- Copy and content: passed. The selected elder, companionship schedule, recent conversation, confirmed memory, family invitation, device state, and primary action match the selected concept's Chinese product narrative.

## Comparison history

### Iteration 1

- Earlier finding [P1]: shared button selector overrode navigation, person-switcher, and recent-row surfaces with black fills.
- Fix: reduced primary-button selector specificity with `:where(...)` so component-specific surfaces win.
- Post-fix evidence: `cal-implementation-v2-desktop.png` shows white navigation, outlined person tabs, white recent rows, and a single black primary CTA.

### Iteration 2

- Earlier finding [P2]: content frame was too narrow, top navigation began too near the center, and the schedule panel was about 40 px too short.
- Fix: set the family-home frame to 46 px desktop margins, moved navigation to begin after the brand, expanded the 7/5 panel to 1333 px, and raised the schedule row rhythm to produce a 480 px panel.
- Post-fix evidence: `cal-implementation-v3-desktop.png`; measured panel bounds are x=46, y=277.9, width=1333, height=480.

### Iteration 3

- Remaining polish [P3]: the 40 px device thumbnail used a standard microphone icon instead of product imagery.
- Fix: generated and integrated `public/assets/companion-speaker.png`. This is non-blocking polish and does not alter layout.

## Interaction and runtime checks

- Person switcher changed the elder summary from 林秀兰 to 陈建国.
- “安排一次陪伴” navigated to `?section=conversations` and removed preview mode as intended.
- Family narrow-screen view at 531 px had no horizontal overflow; the menu toggle was visible and the closed sidebar translated fully off-canvas.
- Maintenance view at 390 px had no horizontal overflow; its desktop view exposes all six top-navigation destinations.
- Browser console: no warnings or errors in the final customer and maintenance checks.
- `npm run build`: passed. The existing bundle-size advisory remains non-blocking.

## Findings

No actionable P0, P1, or P2 mismatches remain.

## Open Questions

- Authenticated production data may vary in row length and count; truncation and empty states remain governed by the existing business components.

## Implementation Checklist

- [x] Selected visual recreated at the desktop target.
- [x] Shared family and maintenance design tokens applied.
- [x] Primary interactions tested.
- [x] Responsive layout checked below the 768 px breakpoint.
- [x] Build and browser console verified.

## Follow-up Polish

- P3: Cal Sans is represented by a Manrope/Inter-compatible fallback because the proprietary font is not bundled.

final result: passed