Cartful Shopper

# Cartful — Shopping App

## Goal
Design and build "Cartful", a shopping app. Feel: boutique browsing, not warehouse scrolling — curated, snappy, a little playful. Every screen should feel native-quality — fluid, tactile, zero jank.

## Visual Language
- **Palette**: ivory base, charcoal text, sunset gradient (#FB7185 → #F59E0B) strictly for price drops and the cart badge
- **Type scale**: large title 32-34px bold, section header 20px semibold, body 16-17px, caption 13px.
- **Surfaces**: layered backgrounds (base / elevated card / sheet), 20px card radius, subtle 1px hairline separators.
- **Iconography**: consistent 24px stroke icons, 1.75px stroke weight.

## Screens
1. **Discover** — full-bleed vertical product stories (photo, brand chip, price tag bottom-left, save + cart buttons right rail); swipe up for next, right for product page.
2. **Product** — gallery pager with dots, size selector pills (unavailable = struck through, never hidden), sticky bottom bar: price + 'Add to cart' morph button.
3. **Cart drawer** — slides over any screen: item rows with qty steppers, free-shipping progress bar, 'You may also like' mini-row.
4. **Checkout** — single screen: address card, payment card, order summary collapsible; giant 'Pay $86.40' button; done in three taps if info saved.
5. **Orders** — timeline per order (Confirmed → Packed → Shipped → Delivered) with animated current-step pulse.

## Interactions & Motion
- Add-to-cart: product image shrinks and arcs into the cart icon, badge bumps with spring.
- Size pill selection slides an underline between options rather than restyling each pill.
- Story swipe uses paging with slight parallax between photo and price tag layers.
- Spring physics for all transitions (stiffness ~260, damping ~24); never linear easing.
- Skeleton loaders for every async surface; optimistic UI for user actions.

## Details That Matter
- Price-drop badge shows both prices with animated strikethrough on the old one.
- Post-purchase screen: order number huge with confetti burst once — then quiet.
## Tech & Quality Bar
- React Native + Expo + TypeScript (or Flutter if requested). Reanimated for 60fps gestures.
- Dark & light mode from a single token file. Safe-area aware on all screens.
- Haptics on key confirmations. Offline-tolerant: cache last data, show stale-while-revalidate.