Design QA: Arabic ecommerce reduction pass

Result

No actionable P0, P1, or P2 findings remain.

The page now keeps three static outcome cards with icons and bold headings only. The fourth decision card, the six-row comparison, the growth audience, and the قراءة مستمرة hero filler are absent. The comparison artwork remains stored in the repository for possible dashboard reuse.

Final result: passed.

Source truth and evidence

• User references:
  • /var/folders/g7/yt0w_0j53bz2vchxb87wl13r0000gn/T/TemporaryItems/NSIRD_screencaptureui_JUJFIM/Screenshot 2026-08-18 at 16.48.39.png
  • /var/folders/g7/yt0w_0j53bz2vchxb87wl13r0000gn/T/TemporaryItems/NSIRD_screencaptureui_vjwr7u/Screenshot 2026-08-18 at 16.49.08.png
  • /var/folders/g7/yt0w_0j53bz2vchxb87wl13r0000gn/T/TemporaryItems/NSIRD_screencaptureui_gqkX5G/Screenshot 2026-08-18 at 16.49.38.png
• Implementation URL: http://127.0.0.1:4288/ar/ecommerce/
• Evidence root: /Users/abdalla/.codex/visualizations/2026/08/18/01a013dc-bdde-7e31-b80c-499296461f66/ecommerce-pr36-reduction/
• Viewports: 1440 x 1000, 768 x 1024, and 390 x 844 CSS pixels.
• Device pixel ratio: 1.
• Captured states: outcomes at rest, owner audience selected, and marketer audience selected.

Side-by-side comparison boards

Each board places the user’s before screenshot at left and the browser-rendered result at right.

• compare-outcome-copy-before-after.png
• compare-decision-card-before-after.png
• compare-six-row-before-after.png

The comparison confirms that the retained outcome cards use only their existing icons and bold headings, the fourth decision card is absent, and the six-row comparison no longer interrupts the flow into section 05.

Browser-rendered captures

• implementation-outcomes-desktop-1440x1000.png
• implementation-outcomes-tablet-768x1024.png
• implementation-outcomes-mobile-390x844.png
• implementation-service-desktop-1440x1000-marketer.png
• implementation-service-tablet-768x1024-owner.png
• implementation-service-mobile-390x844-owner.png
• implementation-service-mobile-390x844-marketer.png

Required QA surfaces

• Copy: all user-listed filler, descriptions, decision actions, comparison copy, and فرق النمو content are absent from the rendered sections.
• Layout: three desktop outcome cards form one balanced row. They stack without clipping on tablet and mobile. Section 04 flows directly into section 05 with no blank comparison gap.
• Typography: document fonts report loaded. The outcome headings render in Noto Kufi Arabic; body copy renders in Almarai.
• Assets: no broken images were detected. The removed comparison’s local artwork and integration SVGs remain on disk.
• Responsiveness: no horizontal overflow at 1440, 768, or 390 pixel widths.
• Interaction: click and Arrow Left/Arrow Right keyboard navigation correctly switch the two remaining audience tabs and their matching panels.
• Browser compatibility: the rendered page produced no console warnings or errors. The quality stamp still contains no SVG <text> nodes, preserving the WebKit-safe HTML lettering implementation.
• Accessibility: selected audience tabs keep synchronized aria-selected, focus, active panel state, and aria-hidden values.
• Anti-slop check: decorative filler and explanatory card copy were removed without adding replacement UI, gradients, icons, or empty containers.

Iteration history

Pass 1

• No visual regression requiring another implementation pass was found.
• The deletion references and implementation captures were reviewed together in all three comparison boards.

Validation

• npm run build: passed.
• Arabic ecommerce assertions: passed.
• JavaScript syntax check: passed.
• Git whitespace check: passed.
• Local-browser desktop, tablet, and mobile checks: passed.

Design QA: supplied V2 five-flow integration

Result

No actionable P0, P1, or P2 findings remain in the five embedded V2 flows.

Final result: passed.

Source truth and implementation evidence

• Source visual truth: /Users/abdalla/Downloads/Interactive Elements Light Mode Design/Sfere Five Flow v2.dc.html
• Implementation: http://127.0.0.1:4291/assets/interactive/sfere-five-flow/index.html?embed=m3
• Source capture: /Users/abdalla/.codex/visualizations/2026/08/18/01a013dc-bdde-7e31-b80c-499296461f66/sfere-five-flow-v2/source-m3-viewport-1100x700.png
• Implementation capture: /Users/abdalla/.codex/visualizations/2026/08/18/01a013dc-bdde-7e31-b80c-499296461f66/sfere-five-flow-v2/implementation-m3-viewport-1100x700.png
• Side-by-side comparison: /Users/abdalla/.codex/visualizations/2026/08/18/01a013dc-bdde-7e31-b80c-499296461f66/sfere-five-flow-v2/comparison-m3-side-by-side.png
• Viewport and density: 1100 x 700 CSS pixels, DPR 1, both captures 1100 x 700 pixels.
• Matched state: flow m3, scrub state لقطة 6, light mode.
• Focused-region comparison: a separate crop was not required because the matched 1100 x 700 captures render the entire instrument panel and its icons at 1:1 density with readable details.

Required QA surfaces

• Fonts and typography: local Arabic and mono fonts load without fallback; the self-hosted Material Symbols font reports loaded and renders ads_click, storefront, cart, verified, trend, link, check, and diagnostic states as icons rather than visible ligature names.
• Spacing and layout rhythm: the source instrument proportions, panel radius, internal spacing, stage heights, and scrub control remain intact. The standalone header and explanatory footer are intentionally hidden in embed mode because the landing-page method row already supplies that hierarchy.
• Colors and visual tokens: the supplied purple, gold, green, red, shadows, soft field background, and opacity hierarchy are preserved.
• Image quality and asset fidelity: platform marks use the repository SVGs. Every simulated Sfere mark was replaced with the real /logo.svg lockup or /assets/img/lp/ecommerce-ar/brand/sfere-mark-colour.svg; no broken images remain.
• Copy and content: the five supplied V2 stages remain, including the current refund-guarantee stage. Em dashes were replaced with allowed punctuation without changing meaning.
• Responsiveness: no horizontal overflow at 1440 x 1000, 768 x 900, or 390 x 844. All five iframe frames remain inside their method cards.
• Interaction: scrub controls move directly to the selected state; m3 and m5 final states were exercised. Reduced-motion mode resolves to final states in source logic.
• Runtime: a clean direct-embed tab produced no console warnings or errors.

Comparison history

Pass 1

• [P1] Material Symbols appeared as raw labels such as ads_click because the adapted embed omitted the icon-font dependency.
• [P1] The supplied standalone header and guarantee seal contained simulated Sfere marks rather than approved brand assets.

Fixes

• Self-hosted the Material Symbols Rounded font and explicitly enabled ligature rendering for every icon span.
• Replaced the simulated marks with the repository’s real Sfere lockup and color mark assets.
• Added build assertions for the real logo assets, icon font, and ligature configuration.

Pass 2

• The matched source and implementation captures show the same final instrument composition, hierarchy, colors, icons, and motion state.
• The only intentional difference is embed chrome: the standalone heading and explanatory footer are removed inside the landing-page card.
• No actionable P0, P1, or P2 differences remain.

Validation

• npm run build: passed.
• npm run test:localized: passed.
• git diff --check: passed.
• Broken images: 0 in the V2 embeds.
• Horizontal overflow: 0 at all tested breakpoints.

Design QA: m1 fibre normalization rebuild

Result

The نوحّد البيانات interaction now matches the approved fibre-optic direction: five recognisable source streams keep distinct packet languages, enter a visible normalization engine, braid together, and exit as one living signal.

Final result: passed.

Source truth and implementation evidence

• Approved source mockup: /Users/abdalla/.codex/generated_images/01a013dc-bdde-7e31-b80c-499296461f66/exec-2beab70d-fef6-4e8f-bd8a-510c6c5e6e8f.png
• Implementation: http://127.0.0.1:4288/assets/interactive/sfere-five-flow/index.html?embed=m1&qa=fibre-normalization
• Implementation capture: /Users/abdalla/.codex/visualizations/2026/08/18/01a013dc-bdde-7e31-b80c-499296461f66/sfere-five-flow-v2/implementation-m1-fibre-final.png
• Reference-over-implementation comparison: /Users/abdalla/.codex/visualizations/2026/08/18/01a013dc-bdde-7e31-b80c-499296461f66/sfere-five-flow-v2/comparison-m1-reference-over-implementation.png
• Matched state: flow m1, scrub state لقطة 6, light mode.
• Comparison size: both panels normalized to 1000 x 344 pixels at DPR 1.

Required QA surfaces

• Visual metaphor: source-specific packet styles remain legible through the merge. The central rings now read as the normalization step, not as decoration, and the output is visibly one controlled signal.
• Asset fidelity: Meta, Snapchat, Google Ads, TikTok, and the grouped-source chip continue to use their real repository marks. No replacement or simulated logos were introduced.
• Copy: exact code-rendered Arabic is retained. The malformed Arabic visible in the generated mockup was not copied into the page.
• Motion: the gold confirmation packet traverses the unified line, the engine rings rotate, and the core breathes only after all sources are normalized. Scrub states 0, 3, and 6 were exercised.
• Responsiveness: no horizontal overflow in direct-embed checks at 1000 x 400, 768 x 420, or 390 x 260; the component also fits its 723 x 260 landing-page iframe at the desktop page check.
• Reduced motion: the existing media-query path disables orbit, packet, confirmation, and core animations and exposes the final confirmation state.
• Runtime: the direct interaction produced no console warnings or errors. A separate parent-page check retained a global MutationObserver error that is not present in this component or its source files.

Iteration history

Pass 1

• The rebuilt composition matched the approved source, but the unified line’s dark underlay read too much like a pipe and the engine face was heavier than the reference.

Pass 2

• Shifted the underlay into the purple family and reduced the engine face opacity.
• Rechecked the initial tangle, three-source transition, completed state, moving confirmation packet, and responsive sizes.
• No actionable P0, P1, or P2 visual differences remain.

Validation

• npm run build: passed.
• Arabic ecommerce assertions, including the new fibre-normalization guard: passed.
• Direct-embed console warnings/errors: 0.
• Horizontal overflow: 0 at all tested component breakpoints.