Skip to content

design-qa.md

Latest commit

 

History

History
104 lines (76 loc) · 3.86 KB

design-qa.md

File metadata and controls

104 lines (76 loc) · 3.86 KB
Raw

Design QA

Scope

  • Hora product landing page feature imagery and event-creation screenshot
  • Support page FAQ list
  • Desktop and mobile responsiveness
  • Dark-mode accessibility, overflow, image loading, and core FAQ interaction

Source of truth

The implementation was checked against the supplied product screenshots:

  • /Users/szamski/Desktop/hero.png
  • /Users/szamski/Desktop/event-color-labels.png
  • /Users/szamski/Desktop/event-types.png
  • /Users/szamski/Desktop/meet-and-contacts.png
  • /Users/szamski/Desktop/accounts-multiple.png
  • /Users/szamski/Desktop/04 — Multiple Accounts · Wide.png
  • /Users/szamski/Desktop/calendar-add-event.png
  • /var/folders/4k/bhh2f8g909524zydqrqk82zr0000gn/T/TemporaryItems/NSIRD_screencaptureui_HwqOGV/Screenshot 2026-07-30 at 21.56.11.png

The feature-card product images are lossless copies of the supplied PNGs. The final 04 — Multiple Accounts · Wide artwork is integrated at its native 1334 × 512 resolution. The remaining editable Sketch recreations stay in the Website — Feature Cards page until their final exports are supplied.

Evidence

Full-page checks

  • Desktop home, 1440 × 900: /tmp/hora-home-desktop-qa.png
  • Mobile home, 390 × 844: /tmp/hora-home-mobile-full-qa.png
  • Desktop feature cards: /tmp/hora-feature-cards-desktop-qa.png
  • Desktop support FAQ: /tmp/hora-support-faq-qa.png

Focused comparisons

  • Product image source versus implementation: /tmp/hora-feature-assets-comparison.png
  • Final Multiple Accounts artwork versus implementation: /tmp/hora-multiple-accounts-comparison.png
  • Support FAQ reference versus implementation: /tmp/hora-support-comparison-small.png

Fidelity review

Typography

  • Uses the existing Hora site type system and established heading hierarchy.
  • FAQ questions were increased to a compact but prominent size matching the supplied reference's density.

Layout and spacing

  • Product images fill the existing Mimestream-inspired feature-card slots.
  • The event-creation screenshot is presented directly, without an extra frame.
  • The FAQ list uses a wider, compact integrated panel with smaller row heights.
  • Desktop and mobile pages have no horizontal overflow.

Color and shape

  • Existing neutral dark palette and restrained Material accent colors remain unchanged.
  • FAQ borders, panel fill, radius, and circular expand controls match the supplied visual direction without introducing a new design language.

Image quality

  • Hero: 3090 × 2052.
  • Event creation: 1024 × 576.
  • Wide feature images: 667 × 256, except the final Multiple Accounts artwork at 1334 × 512.
  • Narrow feature images: 296 × 256.
  • All local product images loaded successfully with non-zero natural dimensions in the browser.
  • The final Multiple Accounts source is preserved at 1334 × 512 and renders at the intended 667 × 256 card ratio without page-level horizontal overflow.

Interaction and accessibility

  • FAQ items use native details and summary semantics and open correctly.
  • Product screenshots have descriptive alt text.
  • The fresh browser session reported no console errors or warnings.
  • External Featured On badges and all lazy product images completed loading after scrolling.

Comparison history

  1. Replaced dashed image placeholders with the supplied product screenshots.
  2. Removed the event-creation screenshot wrapper to match the hero treatment.
  3. Reduced FAQ row density and widened the integrated panel.
  4. Fixed the Next.js image aspect-ratio warning by preserving automatic height.
  5. Replaced the temporary Multiple Accounts screenshot with the final high-resolution SwiftUI-style artwork.

Open items

  • P3: Three remaining high-resolution SwiftUI-style Sketch artboards are still intentionally unexported while the user refines them.

Result

Passed. No remaining P0, P1, or P2 visual QA issues in the implemented scope.