Stripe — QA Report

# Stripe Recreation QA Report

**Date:** 2026-10-24
**Reference homepage:** https://stripe.com/en-ca
**Reference secondary page:** https://stripe.com/en-ca/products
**Scope:** Public, unaffiliated noindex recreation for visual-study and client-review purposes.

## Completion status

- **Technical implementation:** complete for the captured homepage and Products page.
- **Screenshot evidence:** complete at 1440×900 and 390×844, including full-page captures.
- **Intermediate responsive checks:** complete at 768px and 1024px.
- **Interaction QA:** complete for local navigation, mobile menu, demo actions, filter popovers, product search, catalog-area switching and mobile area bar.
- **Visual approval:** pending Frederick's review.

## Evidence index

### Fixed viewport captures

- `local-screenshots/home-desktop-1440x900.png`
- `local-screenshots/home-mobile-390x844.png`
- `local-screenshots/secondary-desktop-1440x900.png`
- `local-screenshots/secondary-mobile-390x844.png`

### Full-page captures

- `local-screenshots/home-full-desktop.png`
- `local-screenshots/home-full-mobile.png`
- `local-screenshots/secondary-full-desktop.png`
- `local-screenshots/secondary-full-mobile.png`

### Comparison evidence

- `qa/stripe-comparison-overview.png`
- `qa/homepage-desktop-side-by-side.png`
- `qa/homepage-mobile-side-by-side.png`
- `qa/secondary-desktop-side-by-side.png`
- `qa/secondary-mobile-side-by-side.png`
- `qa/homepage-desktop-difference.png`
- `qa/homepage-mobile-difference.png`
- `qa/secondary-desktop-difference.png`
- `qa/secondary-mobile-difference.png`

### Machine-readable evidence

- `local-layout-qa.json`
- `tools_cdp_capture.py`

## Measured geometry

| Surface | Local result | Result |
|---|---:|---|
| Desktop header | x=88, width=1264, height=76 | Stable centered container |
| Desktop homepage hero | x=88, y=76, width=1264, height=614 | Matches captured section rhythm |
| Desktop customer logo strip | y=690, height=72 | Matches hero transition |
| Mobile header | y=0, height=66 | Matches reference mobile header |
| Mobile homepage hero | y=66, height=419 | Matches reference hero boundary |
| Mobile logo strip | y=485, height=64 | Matches reference transition |
| Products desktop hero | y=76, height=376 | Matches reference hero boundary |
| Products desktop filter tray | x=104, y≈293, w=1232, h=80 | Matches observed tray geometry |
| Products mobile hero | y=66, height=388 | Matches reference hero boundary |
| Products mobile filter tray | x=16, y≈242, w=358, h=174 | Matches stacked control structure |
| Horizontal overflow at 390, 768, 1024 and 1440px | 0px | Pass |

## Interaction results

Verified with the local CDP runner:

- Homepage and Products links navigate between the two local pages.
- Desktop navigation remains visible at 1024px and 1440px.
- Mobile menu appears at 390px and 768px and opens without horizontal overflow.
- Sign in, Contact sales, Get started, Start now and related CTA controls stop at a local demo notice.
- Products Use case and Product area filter buttons open the local popover.
- Product search filters the local product cards; searching `link` hides the other cards and leaves the Link card visible.
- Desktop catalog area buttons update the heading and active state.
- Mobile Navigate to bar remains fixed at the bottom of the Products page.
- No account, dashboard, checkout, payment, subscription or external write flow is connected.

## Visual comparison findings

The recreation preserves the observed visual system and section hierarchy:

- White Stripe-style header with compact nav and purple Contact sales action.
- Large hero typography over a diagonal multi-color gradient field.
- GDP metric, paired purple/outlined CTAs and customer-logo transition.
- Spacious solutions section with elevated cards and finance UI illustrations.
- Products page gradient hero, centered statement, search/filter tray, left catalog rail and card grid.
- Mobile stacked filters, clipped single-card catalog presentation and fixed Navigate to bar.

### Layout and typography differences

- The local header is centered inside a 1264px frame, while the live reference includes a similar constrained frame but exact internal spacing and icon treatment differ.
- The local headline uses Source Sans 3 as a public substitute for Stripe's proprietary typeface. Line widths and glyph shapes are therefore close but not exact.
- CSS illustration cards replace the detailed payment, billing, Link and Terminal demos visible on the reference.
- The local Products mobile card begins a few pixels lower in the fixed capture because the local card copy and filter controls use independent text metrics.
- The local desktop products hero statement is centered within a slightly narrower independent text measure after correction; the filter and catalog geometry remain aligned.

### Gradient, imagery and branding differences

- The local diagonal gradient is authored with CSS. It reproduces the orange, pink, violet and blue field but not the live site's exact raster gradient texture, folds or edge shape.
- Customer labels are text approximations; no Stripe or customer logo artwork was copied.
- The wordmark is ordinary text, not a copied Stripe logo asset.
- Payment and financial UI examples are neutral local illustrations; they do not represent live accounts or data.

Raw fixed-viewport image deltas are diagnostic only because the reference's gradient texture and visual assets differ. Mean absolute RGB deltas were: homepage desktop 27.64, homepage mobile 32.98, Products desktop 18.26 and Products mobile 16.95. Changed-pixel percentages above a 10 RGB threshold were 42.03%, 45.86%, 37.11% and 35.58% respectively.

## Remaining defects

1. Exact proprietary gradient texture and product/customer artwork are not reproduced.
2. Exact Stripe font and icon geometry are not reproduced.
3. The local site intentionally stops before any real account, dashboard, payment or checkout behavior.
4. The independent page covers the captured homepage/Products composition, not every live Stripe section or product.
5. The live reference can change after the capture date; the saved reference screenshots are the authoritative inputs for this run.

## Acceptance decision

Stripe passes the technical recreation gate: both requested pages are implemented, fixed and full-page captures exist, no-overflow checks pass at all requested widths, interactions were exercised, and side-by-side/difference evidence is preserved. Visual approval remains **pending Frederick's review** because layout fidelity and asset/branding limitations are reported separately.