Ember & Oak

# Ember & Oak — Coffee Roaster E-commerce Site

## Goal
Build a production-ready coffee roaster e-commerce site called "Ember & Oak". Overall vibe: craft over commerce — a roastery that knows every farmer by name. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: cream #FAF6EF base, espresso #2B1D16 text, burnt amber #C77B3F accent, subtle radial warmth behind heroes
- **Typography**: serif display with character (recoleta-style) 56-80px, clean sans body; tasting notes in italic
- **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. **Announcement bar** — 'Free shipping over $35 · Roasted every Tuesday' sliding gently.
2. **Navbar** — logo, Shop/Subscriptions/Our farms/Journal, cart icon with springy count badge.
3. **Hero** — split: left headline 'Roasted for the slow morning' + CTA, right a large bag render that tilts 3° on mouse; floating tasting-note chips (stone fruit, cocoa, honey).
4. **Bestsellers** — 4 product cards: bag image, origin flag dot, roast-level dots (1-5 filled), price; hover lifts card and draws a thin amber underline.
5. **Subscription builder** — 3-step inline widget: frequency → grind → quantity, price updating live with a spring number.
6. **Farm story** — full-width image band with parallax, quote from the grower, 'Meet the farms' link.
7. **Brew guides** — 3 cards (V60 / Espresso / Cold brew) with time + ratio in mono.
8. **Footer** — newsletter with a coffee-ring stain graphic, hours, socials.

## Motion
- Bag tilt is spring-based (stiffness 120), resets on leave.
- Price ticks up/down with animated digits when builder options change.
- Tasting chips float on 5-7s independent loops, 6px amplitude.
- 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
- Roast-level dots fill with a 200ms stagger when a card enters view.
- Cart badge uses a scale-pop keyframe on add — satisfying, not cartoonish.

## 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.