Atelier Noir

# Atelier Noir — Fashion E-commerce Storefront

## Goal
Build a production-ready fashion e-commerce storefront called "Atelier Noir". Overall vibe: editorial luxury — magazine spread meets flagship boutique; restraint over decoration. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: bone #F5F2ED background, ink #141414 text, no accent color — hierarchy through scale and weight only
- **Typography**: high-contrast serif (e.g. a Didone) for display at 72-120px, tiny grotesque caps (11px, 0.14em tracking) for labels
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Topbar** — center logo wordmark, left hamburger ('Menu'), right 'Bag (0)'; 1px bottom rule.
2. **Hero** — full-viewport lookbook image, model centered; collection name overlaid in massive serif, split across two lines that straddle the model.
3. **Collection grid** — 2-col asymmetric product grid with generous white gutters; on hover image swaps to alternate shot and 'Quick add' underline link slides in.
4. **Editorial break** — full-bleed image with a single pull-quote in italic serif, parallax at 0.85 speed.
5. **Product focus** — one hero product: sticky image left, scrolling details right (fabric, fit, care) in numbered rows.
6. **Journal teaser** — 3 article cards, date in caps label, title in serif, thin rule between.
7. **Footer** — newsletter input with underline-only styling, sitemap in caps labels, oversized wordmark bottom.

## Motion
- Page transitions: content fades under a bone-colored curtain that wipes vertically in 500ms.
- Hero headline letters rise from behind a baseline mask, 40ms stagger, once on load.
- Product hover swap is a 300ms crossfade; 'Quick add' underline draws left→right.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Cart drawer slides from right with a vertical 'Your selection' label; free-shipping progress bar in ink.
- All imagery 4:5 ratio in grid, 16:9 in editorial breaks — never mixed.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.