musicland/design-qa.md

# Design QA — Pochette MusicLand Playbacker

- Source visual truth: `/Users/sacha/Library/Containers/net.whatsapp.WhatsApp/Data/tmp/documents/AC89FF71-250F-4949-9D82-F89EE91CF735/PHOTO-2026-07-28-13-57-44.jpg`
- Supplied base asset: `/Users/sacha/Projets/MusicLand/src/assets/UI/musiclandPlaybackCover.png`
- Implementation screenshot: `/Users/sacha/Projets/MusicLand/design-qa-assets/musicland-cover-preview.png`
- Side-by-side comparison: `/Users/sacha/Projets/MusicLand/design-qa-assets/musicland-cover-comparison.png`
- State: deterministic cover with a profile picture, artist name `username`, and `PLAYBACKER`
- Viewport / output: square cover at 1024 × 1024 px
- Density normalization: the 894 × 890 px source photo was cropped to its 661 × 661 px cover region, then normalized to 1024 × 1024 px. The implementation output is native 1024 × 1024 px at density 1.

## Full-view comparison evidence

The comparison places the normalized source on the left and the deterministic implementation on the right. The MusicLand artwork, central profile-photo placement, artist-name hierarchy, `PLAYBACKER` label, rounded corners, palette, and square composition align with the supplied target.

## Focused-region comparison evidence

The full cover is the focused component for this request, so a separate crop was not needed. The critical regions remain clearly readable at 1024 px:

- top MusicLand brand;
- central circular profile picture inside the supplied ring;
- artist name below the profile picture;
- `PLAYBACKER` label at the bottom.

## Required fidelity surfaces

- Fonts and typography: white, light sans-serif text matches the reference hierarchy. Long artist names use a smaller server-side size and the app preview scales the text to one line.
- Spacing and layout rhythm: the profile, artist name, and bottom label follow the same vertical order and approximate positions as the source.
- Colors and visual tokens: the supplied blue-purple-pink artwork is reused directly without recoloring or recreated gradients.
- Image quality and asset fidelity: the supplied PNG is used as the source asset. The final server output is rendered at 1024 × 1024 px. The profile image is center-cropped and circularly masked.
- Copy and content: `MUSICLAND`, the selected artist name, and `PLAYBACKER` are the only cover content.

## Findings

No actionable P0, P1, or P2 visual mismatch remains.

## Comparison history

1. Initial output placed the artist name and `PLAYBACKER` too high and too large.
2. Font sizes and vertical positions were adjusted.
3. The revised side-by-side comparison shows the intended hierarchy and spacing.

## Residual test gaps

The in-app browser blocked local `localhost` navigation during QA, so the surrounding step-2 screen could not be captured there. The web bundle completed successfully, and the actual deterministic cover renderer was executed locally to produce the implementation evidence above.

final result: passed

---

# Design QA — Recentrage du fond My Library mobile

## Evidence

- Source visual truth : `/Users/minuit/musicland/src/assets/UI/libraryBgWeb.png`
- Capture avant correction : `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_4d679451-52ae-4b7f-bad0-09b9187cf4f4.jpg`
- Capture après correction : `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_68b9e20d-4f9b-450e-9436-99fa2392e278.jpg`
- Comparaison cible/implémentation : `/private/tmp/musicland-design-qa/library-centering-target-implementation.png`
- Comparaison avant/après : `/private/tmp/musicland-design-qa/library-centering-before-after.png`
- Source : 1920 × 1080 px.
- Implémentation : 368 × 800 px sur iPhone 17 Pro Simulator, iOS 26.5.
- Normalisation : crop vertical de 497 × 1080 px centré sur le point focal réel de la pièce, puis ramené à 368 × 800 px pour la comparaison.
- État : My Library, utilisateur connecté, locale française, données réelles chargées.

## Findings

- Aucun écart P0, P1 ou P2 ne subsiste.
- Fonts and typography : les textes de l’interface et la typographie intégrée au décor restent inchangés et nets.
- Spacing and layout rhythm : le néon `WRITING SPACE`, le logo `MUSICLAND`, la fenêtre centrale et les fauteuils partagent maintenant le même axe visuel que l’écran.
- Colors and visual tokens : aucun filtre, changement de palette ou variation d’opacité n’a été ajouté.
- Image quality and asset fidelity : l’asset web 1920 × 1080 est réutilisé directement ; seul son cadrage natif est ajusté, sans recompression ni baisse de qualité.
- Copy and content : aucun texte applicatif n’a été modifié.

## Full-view Comparison Evidence

- Avant : le cadrage géométrique de l’image plaçait le point focal de la composition trop à gauche et coupait le début de `WRITING SPACE`.
- Après : le néon, le logo et le centre de la pièce sont équilibrés autour de l’axe du téléphone, tandis que le contenu et la barre de navigation restent inchangés.

## Focused-region Comparison Evidence

- La comparaison cible/implémentation montre le même crop autour du néon, de la fenêtre et des fauteuils. Aucun détail important n’est étiré ou reconstruit.

## Comparison History

1. P2 — point focal du fond décalé sur mobile.
2. Correction — ajout d’un style de fond optionnel au composant `Page` et cadrage My Library à 140 % de largeur, ancré à gauche pour recentrer le point focal.
3. Post-fix — capture iPhone 17 Pro et comparaison normalisée : aucun P0/P1/P2 restant.

## Implementation Checklist

- [x] Préserver l’asset web original.
- [x] Recentrer uniquement le cadrage mobile de My Library.
- [x] Reconstruire et relancer l’application iOS.
- [x] Vérifier visuellement l’écran authentifié.

## Follow-up Polish

- Aucun nécessaire.

final result: passed

---

# Design QA — Home, Playback et My Library (parité web/mobile)

## Evidence

- Source visual truth — carte d’accueil : `/Users/minuit/musicland/src/assets/UI/musiclandStreaming.png`
- Source visual truth — fond Playback web : `/Users/minuit/musicland/src/assets/UI/playbackBG2.png`
- Source visual truth — fond My Library web : `/Users/minuit/musicland/src/assets/UI/libraryBgWeb.png`
- Capture d’implémentation — accueil mobile : `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_af967a03-10cb-447c-87e6-e04ff9564781.jpg`
- Capture d’implémentation — Playback mobile : `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_04b867f4-fd08-45e0-9227-9424f5c278b6.jpg`
- Capture d’implémentation — My Library mobile : `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_8ad858ba-7b4a-4e12-bd9b-f4df6e5c4459.jpg`
- Comparaison ciblée — carte Streaming : `/private/tmp/musicland-design-qa/home-card-compare.png`
- Comparaison ciblée — carte Playback : `/private/tmp/musicland-design-qa/playback-card-compare.png`
- Comparaison plein écran — fond Playback : `/private/tmp/musicland-design-qa/playback-background-compare.png`
- Comparaison plein écran — fond My Library : `/private/tmp/musicland-design-qa/library-background-compare.png`
- Viewport d’implémentation : iPhone 17 Pro Simulator, capture 368 × 800 px, densité normalisée par l’outil de capture.
- Sources : carte Streaming 1920 × 1080 px, carte Playback 1920 × 1080 px, fond Playback 2048 × 2048 px, fond My Library 1920 × 1080 px.
- État : utilisateur connecté, locale française, accueil défilé jusqu’à la carte Streaming, onglets Playback et My Library chargés avec données.

## Findings

- Aucun écart P0, P1 ou P2 exploitable ne subsiste.
- Fonts and typography: la typographie intégrée aux cartes Streaming et Playback est conservée sans reconstruction. Les textes d’interface gardent la hiérarchie et les retours à la ligne existants.
- Spacing and layout rhythm: la carte Streaming conserve le ratio 16:9 et les rayons existants. La carte Playback reste alignée au centre ; le léger zoom interne retire uniquement les contours blancs encodés au bord de l’image.
- Colors and visual tokens: les arrière-plans mobiles réutilisent exactement les assets web, sans recoloration ni filtre supplémentaire.
- Image quality and asset fidelity: les images originales sont réutilisées à leur résolution source. Aucun nouvel asset compressé ou approximatif n’a été créé.
- Copy and content: aucun contenu textuel métier n’a été modifié par cette passe.

## Full-view Comparison Evidence

- Playback : la comparaison place le crop vertical de `playbackBG2.png` à gauche et le rendu mobile à droite. Les projecteurs, le plateau, le mur d’écrans et la perspective correspondent ; les éléments d’interface restent lisibles par-dessus.
- My Library : la comparaison place le crop vertical de `libraryBgWeb.png` à gauche et le rendu mobile à droite. Le néon Writing Space, les écrans, les fauteuils et la palette correspondent au fond web attendu.
- Accueil : le rendu mobile montre la carte `STREAMING MUSICLAND` à la place de l’ancienne carte Club après l’étape 4.

## Focused-region Comparison Evidence

- Carte Streaming : comparaison source/rendu à dimensions égales, avec le même logo, la même onde, le même cadrage et les mêmes couleurs.
- Carte Playback : comparaison source/rendu ciblée sur le bord de l’image. Les contours blancs visibles dans la source aux coins sont absents du rendu grâce au crop interne, sans perte perceptible sur le logo.

## Comparison History

1. Passe initiale après correction : aucune différence P0/P1/P2 ; aucune itération corrective supplémentaire requise.

## Implementation Checklist

- [x] Remplacer la carte Club de l’accueil par la carte Streaming partagée sur web et mobile.
- [x] Utiliser le fond Playback web sur mobile.
- [x] Masquer les contours blancs de la carte Playback sans dégrader l’asset.
- [x] Utiliser le fond My Library web sur mobile.
- [x] Construire le bundle web.
- [x] Construire et lancer l’app iOS dans le simulateur.
- [x] Vérifier visuellement les trois écrans dans l’état authentifié.

## Follow-up Polish

- Aucun nécessaire pour cette correction ciblée.

final result: passed

---

# Design QA — Home Step 3 Card

## Evidence

- Source visual truth: `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/codex-clipboard-b493e809-ad60-4136-998c-a6a8fec6c27e.png`
- Shared implementation asset: `/Users/minuit/musicland/src/assets/icons/video.png`
- Mobile implementation screenshot: `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_ad2bf22d-a0e4-44ad-a161-76e096792cb0.jpg`
- Web implementation screenshot: `/private/tmp/musicland-step3-web-full.png`
- Focused source/web comparison: `/private/tmp/musicland-step3-reference-vs-web.png`
- Source pixels: 1328 × 748 RGBA.
- Mobile viewport: 368 × 800 pixels on the iPhone 17 Pro simulator. The card is rendered by the production `StageCard` mobile variant with `contentFit="contain"`.
- Web capture viewport: 1280 × 720 pixels. The shared asset was served by Expo Web from `src/assets/icons/video.png`.
- Browser console: no errors on the standalone shared-asset render. The app landing page still reports pre-existing Stripe provider `internal` errors, unrelated to the card asset.
- Density normalization: the focused comparison scales the source proportionally to 720 px high and places it beside the 1280 × 720 web capture. The source image data and the repository asset have identical SHA-256 hashes.
- State: authenticated Home menu, French locale, scrolled to the locked Step 3 card.

## Findings

- No actionable P0, P1, or P2 mismatches.
- Fonts and typography: the supplied `VIDEO / MUSICLAND` typography remains embedded in the raster asset and is reproduced exactly. The Step 3 label and localized description continue to use the existing Home card typography.
- Spacing and layout rhythm: the existing mobile and web `StageCard` layouts are unchanged. `contentFit="contain"` preserves the supplied aspect ratio without stretching or cropping.
- Colors and visual tokens: the dark navy panel, blue/magenta waveform, white lettering, and neon suit accents match the source asset exactly.
- Image quality and asset fidelity: the supplied RGBA PNG is used directly; no reconstruction, approximation, recompression, or generated replacement was introduced. The gray area visible behind transparency in the standalone browser image view is browser canvas chrome, not part of the app card.
- Copy and content: Step 3 keeps the localized Mr Benaï text in French and English. Step 4 keeps its localized Video-space text.

## Full-view Comparison

- The mobile Home capture confirms the new Mr Benaï visual appears in the Step 3 slot with the intended subject, waveform, logo, proportions, and rounded card edge.
- The web asset capture confirms Expo Web resolves the same 1328 × 748 shared source used by native.

## Focused-region Comparison

- The side-by-side source/web comparison shows identical subject placement, waveform geometry, typography, colors, and transparency boundaries. No focused correction was needed.

## Comparison History

- Pass 1: no P0/P1/P2 findings; no corrective iteration required.

## Implementation Checklist

- [x] Replace the shared Step 3 card asset with the supplied PNG.
- [x] Preserve the existing mobile and web card layouts.
- [x] Preserve localized Step 3 and Step 4 copy.
- [x] Verify the card on the mobile Home menu.
- [x] Verify the shared asset through the local Expo Web server.

## Follow-up Polish

- None required for this asset replacement.

final result: passed

---

# Design QA — Fonds Library et Playback web/mobile

## Evidence

- Source visual truth Library : `/Users/minuit/Library/Containers/net.whatsapp.WhatsApp/Data/tmp/documents/7E14186C-23EE-4687-A68F-19B0F8E453B4/PHOTO-2026-08-27-15-22-58.jpg`
- Source visual truth Playback : `/Users/minuit/Library/Containers/net.whatsapp.WhatsApp/Data/tmp/documents/6C989EEC-09A2-4A2B-A014-33F05E6107AC/PHOTO-2026-08-27-15-22-58.jpg`
- Assets intégrés : `/Users/minuit/musicland/src/assets/UI/libraryMainBackground.jpg` et `/Users/minuit/musicland/src/assets/UI/playbackMainBackground.jpg`
- Capture mobile Library : `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_4bb9262f-e642-483b-a7cf-368fa1e1f6c5.jpg`
- Capture mobile Playback : `/var/folders/3f/mf7j26x525g3pg2xgw_y4_xh0000gn/T/screenshot_optimized_e8f9391d-85c6-45d5-aff0-6f414714b274.jpg`
- Rendu Browser du bundle web Library : `/private/tmp/musicland-design-qa/library-web-render.png`
- Rendu Browser du bundle web Playback : `/private/tmp/musicland-design-qa/playback-web-render.png`
- Comparaison Library mobile : `/private/tmp/musicland-design-qa/library-mobile-target-implementation.png`
- Comparaison Playback mobile : `/private/tmp/musicland-design-qa/playback-mobile-target-implementation.png`
- Comparaison Library web : `/private/tmp/musicland-design-qa/library-web-target-implementation.png`
- Comparaison Playback web : `/private/tmp/musicland-design-qa/playback-web-target-implementation.png`
- Viewport mobile : iPhone 17 Pro Simulator, iOS 26.5, capture 368 × 800 px.
- Viewport web : 1280 × 720 px dans le navigateur intégré.
- Source Library : 1280 × 724 px ; source Playback : 1280 × 714 px.
- Normalisation mobile : crop `cover` centré de 333 × 724 px pour Library et 328 × 714 px pour Playback, puis mise à l’échelle 368 × 800 px.
- État mobile : utilisateur connecté, locale française, onglets Library et Playback avec données réelles.
- État web : bundle Expo exporté et assets chargés depuis le serveur local. La session du navigateur intégré est sur l’inscription, donc les pages authentifiées complètes n’y ont pas été ouvertes.

## Findings

- Aucun écart P0, P1 ou P2 sur les deux fonds.
- Fonts and typography : aucune typographie n’est recréée dans les fonds ; les textes et logos d’interface restent inchangés et lisibles.
- Spacing and layout rhythm : les deux points focaux sont centrés en portrait. Le bureau central de Library et la plateforme centrale de Playback restent alignés avec l’axe de l’écran.
- Colors and visual tokens : les palettes cyan, bleu nuit et magenta des sources sont conservées sans filtre ni recoloration.
- Image quality and asset fidelity : les fichiers fournis ont été copiés octet pour octet. Les SHA-256 des sources et des assets intégrés sont identiques. Aucun redimensionnement permanent ni recompression n’a été appliqué.
- Copy and content : aucun contenu applicatif n’a été modifié.

## Full-view Comparison Evidence

- Library mobile : le crop vertical rendu correspond au crop `cover` centré de la source ; la fenêtre, la guitare et la table restent sur le même axe.
- Playback mobile : le plafond néon, l’écran central et la plateforme correspondent au crop centré de la source.
- Web : les deux comparaisons côte à côte montrent que les fichiers exportés par Expo sont visuellement identiques aux sources fournies.

## Focused-region Comparison Evidence

- Les zones centrales critiques sont lisibles dans les comparaisons mobiles : fenêtre/bureau pour Library, hologramme/plateforme pour Playback.
- Les comparaisons web à 1280 px vérifient également les bords, la netteté et l’absence de halo ou de compression supplémentaire.

## Comparison History

1. Passe initiale après remplacement : aucune différence P0/P1/P2 ; aucune correction visuelle supplémentaire requise.

## Implementation Checklist

- [x] Copier les deux sources sans conversion.
- [x] Utiliser l’image 1 uniquement pour les écrans Library web et mobile.
- [x] Utiliser l’image 2 pour l’écran Playback partagé web et mobile.
- [x] Construire le bundle web et vérifier les deux assets dans le navigateur intégré.
- [x] Construire et lancer l’app iOS.
- [x] Ouvrir et capturer les deux onglets sur le simulateur.
- [x] Vérifier les erreurs console web : aucune erreur liée à cette modification ; seulement deux avertissements préexistants Stripe HTTP et Animated web.

## Follow-up Polish

- Aucun nécessaire pour ce remplacement d’assets.

final result: passed