# Designer Brief — Sleep + Recovery PDP

> Handoff to designer (Vishal / Jugal). Source = `landing-page/pdp-v3/index.html` rendered with all 22 sections.

---

## What's already built

- Working HTML at `creative-output/sleep-recovery-magnesium/landing-page/pdp-v3/index.html`
- All copy is final (deep-rewritten from Creatine templates, zero residual)
- All image references point to the SRM canonical asset library
- Brand tokens set: deep purple #2D1F6E + purple-light #9B86F7 + cream #FAF6F0

## What designer needs to do

### 1. Replace AI-generated section imagery with team's preferred direction
Currently the PDP pulls from `creative-output/sleep-recovery-magnesium/pdp/1x1/`. These are v6/v8 AI renders. Designer can:
- Keep as-is if they read clean at desktop scale
- Replace with hi-res versions (designer-rendered or photographed) where the pack appearance is critical

### 2. Tighten the 22-section visual rhythm
The 22 sections are:
1. Announcement bar
2. Sticky header
3. Hero (canonical packshot + headline)
4. Problem (why you're tired)
5. What's inside (4-ingredient breakdown)
6. Ingredient deep-dive (Mg / Glycine / L-Theanine / Tart Cherry)
7. Mechanism — 4 pathways
8. Timeline — first night → week 2
9. Comparison (vs single-form Mg, vs melatonin pills)
10. Trust badges
11. ~~UGC photo strip~~ (held — rebuild as Okendo quote collage)
12. Clinical proof
13. Testimonials (3 ICPs)
14. Pricing tiers
15. FAQ accordion
16. Subscribe band
17. Founder section
18. Money-back-guarantee
19. Sticky cart
20. Reviews aggregator
21. Cross-sell
22. Footer

### 3. Set the brand-system per Figma library
Use:
- NeueMontreal type stack (already loaded in `landing-page/v2/assets/fonts/`)
- Purple gradient on hero section
- White pill panels matching pack design
- Green-dot accent for nutraceutical mark

### 4. Mobile breakpoint check
Mobile is 60-70% of traffic. Sections that fail at mobile:
- Section 9 comparison (3-column → stack)
- Section 14 pricing (3-tier → swipe)
- Section 17 founder (side-by-side → stack)

### 5. Final deliverables
- Figma file (production-ready)
- Exported assets (SVG icons, PNG hero images, WebP optimised)
- Style guide page (tokens, type ramp, button states)
- Shopify section JSON (if cutting into Shopify directly)

## Timeline

| Milestone | Owner | Due |
|---|---|---|
| Designer review of HTML | Vishal | T+2 days |
| First Figma draft | Vishal | T+5 days |
| Brand mgr review | Tavishi | T+7 days |
| Founder review | Nihaal | T+9 days |
| Dev cut | dev team | T+14 days |
| Live | — | T+18 days |

## Open questions for designer

1. Hero packshot: AI render or photograph?
2. Testimonial section: real photos or AI-generated lifestyle?
3. Pricing tier callouts: which subscribe-save tier is highlighted "best value"?
4. Section 11 UGC: rebuild as quote collage or skip?
5. Cross-sell: Creatine, or wait for additional SKU?

## Reference links

- LP V2: `landing-page/v2/index.html`
- Advertorial: `landing-page/advertorial.html`
- Production sheet: `briefs/PRODUCTION-SHEET.tsv`
- Canonical anatomy: `products/sleep-recovery-magnesium/canonical-anatomy.md`