# Application 3 — Sneakers Store · Design System

> Single source of truth for continuing App 3. New screens **must** use only these tokens, components and patterns. If something is missing, add it here first, then build.

- Entry file: `apps/app-3/App 3 - Sneakers.html`
- Source: `src/ui.jsx` (icons, neutral brand mark, status bar, orbit ring) · `src/screens.jsx` (data, screens, phone shell, stage)
- Assets: `apps/app-3/assets/`: AI-generated sneakers with transparent backgrounds, cropped tight
- Stack: React 18 + Babel in-browser. CSS custom properties in the HTML `<style>`.
- ⚠️ **No real brand logos.** The shoes are unbranded, and the centre nav button uses our neutral `Mark` (a zig-zag stroke). Keep it that way.

---

## 1. Principles

1. **Sport poster type + soft UI.** A condensed display face (Anton, all caps) for headlines and prices. Everything else is DM Sans, small and quiet.
2. **Lavender-white world, one electric purple.** Backgrounds are a very light lavender. `--purple` is reserved for primary affordances (slider knob, Explore, active category, swap handle).
3. **Black pills for commerce.** Continue, Add to Bag and the centre nav button are solid near-black.
4. **Floating product.** Shoes sit on a thin purple **orbit ring** with a soft glow and a slow float. A huge faint "AIR" ghost word sits behind the product.
5. **Rounded, airy cards.** White cards with soft purple-tinted shadows, no borders.

---

## 2. Canvas & device

| Token | Value |
|---|---|
| Stage | `1024 × 768`, scaled to fit |
| Page bg | `--page #7C7890` (muted violet-grey) |
| Phone | `274 × 548`, radius 26, bezel `0 0 0 3px #C9C6D6, 0 0 0 4px #b3afc3`, shadow `0 30px 60px rgba(30,20,60,.25)` |
| Layout | S1 `64,120 rotate(-3°)` · S2 `387,93` · S3 `684,118 rotate(3°)` |
| Status bar | 38px, time `5:08`, 10.5px/700 |
| Gutter | 16px (product body 20px) |

---

## 3. Colour tokens

| Var | Hex | Use |
|---|---|---|
| `--screen` | `#F7F6FB` | Screen background |
| `--lav-top` | `#E4DEFA` | Onboarding gradient top → `#F1EEFC` → `#FAF9FE` |
| `--card` | `#FFFFFF` | Cards, nav, buy bar, search |
| `--ink` | `#0E0E10` | Text, black pills, featured banner, centre nav |
| `--muted` | `#77757F` | Sub-labels ("Men's Shoes") |
| `--line` | `#ECEBF1` | Search border, selected-colour ring |
| `--field` | `#F1F0F6` | Size chips (idle) |
| `--purple` | `#7457EA` | Primary accent: knob, Explore, swap handle, cart badge, active nav icon |
| `--purple-2` | `#8E78F0` | Ring gradient mid, glows |
| `--purple-soft` | `#E9E3FD` | Active category icon background |
| `--star` | `#F5B301` | Rating stars |
| `--red` | `#E03A3A` | Favourited heart |
| Product colours | White `#F2F2F2` · Black `#111` · Red `#D93434` · Green `#8BD432` | Colour swatches |
| Featured banner | `radial-gradient(120% 140% at 80% 40%, #1c2a12, #0e0e10 55%)` + neon glow `rgba(170,255,40,.35)` | |

---

## 4. Typography

- **Display: Anton** (400, uppercase, letter-spacing .3–.5px): `EVERY STEP HAS A STORY` 36px/1.08 · `AIR MAX 2027` 21px · `AIR MAX 5` 19px · prices `$269` 19px · ghost word `AIR` 190px at 4.5% opacity.
- **Body: DM Sans** 400/500/600/700.

| Role | Size / weight |
|---|---|
| Home question | 11.5px / 700 (`What are you looking for?`) |
| Card title | 10px / 500 (`Air Max Pluse`) |
| Card price | 10.5px / 700 (`$189.00`) |
| Section | 9.5px / 600 (`Category`, `Trending Now`) · product sections 9px / 600 |
| Body | 8.5px (search, greeting, rating) |
| Small | 7–7.5px (See all, Size Guide, sizes, colour labels, details) |
| Micro | 6–6.5px (category labels, nav labels, banner copy) |

The reference copy is kept verbatim ("Air Max Pluse", "Hey, Alex 👋").

---

## 5. Spacing & radius

- Radius: `10` (Explore, category tile) · `14` (trend card) · `16` (search, featured banner, nav/buy top corners) · `23` (Continue slider) · `50%` (icon buttons, size chips, swatches, knob).
- Section header margin `14px 16px 8px`. Card gap `8px`.

---

## 6. Components

| Component | Spec |
|---|---|
| `StatusBar3` | 5:08 + signal/wifi/battery |
| `Ring` | SVG ellipse, 1.4px stroke gradient `#6A4FE0 → #8E78F0 → #C9BDF8`, radial purple glow beneath |
| `Mark` | Neutral brand mark (zig-zag stroke) — use instead of any real logo |
| **Slide-to-continue** | 46px black pill; 50px purple knob with a white arrow and purple shadow. Drag > 60% → next; tap also works |
| **Search** | 32px white pill, 1px `--line` border, search icon, input, camera icon |
| **Featured banner** | 104px dark card: "Featured Drop" (6.5px), Anton title, 2-line copy, purple `Explore` pill; the shoe bleeds off the right edge and rotates on hover |
| **Category tile** | 48px column: 26px icon circle + label. Active = white tile + `--purple-soft` circle + purple icon |
| **Trend card** | 136×146 white, radius 14. Heart top-right, shoe image, name / sub / price. The second card is offset 22px down (staggered, as in the reference). Scrolls horizontally |
| **Bottom nav** | 52px white bar with top corners 16. Home · Shop · **centre 44px black circle** (raised 18px, with a 4px screen-colour ring) · Wishlist · Profile. Active icon purple |
| **Product stage** | Ghost "AIR", ring, shoe (drag to rotate ±40°, springs back), purple swap handle `22×14` |
| **Colour chip** | 14px swatch + label; selected = white pill with a hairline ring. Selecting a colour tints the product image |
| **Size chip** | 26px circle, `--field`; selected = white with ring + shadow, 600 weight |
| **Buy bar** | 60px white, top corners 18: Anton price left, black `Add to Bag` pill with a white 26px bag circle right. On tap → purple "Added ✓" and the cart badge on Home increments |

Icons: 1.5–1.8 stroke, round joins, 24 viewBox (`Ico.*`).

---

## 7. Motion

| Pattern | Spec |
|---|---|
| Screen enter | `in3` .4s: translateY 10px + fade |
| Product float | 4s ease-in-out infinite, ±6px |
| Slider knob | follows the pointer; snaps back with .3s `cubic-bezier(.2,.8,.2,1)` |
| Banner hover | shoe rotates -14° and scales to 1.05 |
| Cart badge | pop in (scale 0 → 1) |
| Colour change | image filter transitions over .4s |

---

## 8. Navigation

Each phone keeps its own stack: `onb → home → p:<id>`.
- Onboarding: slide or tap → Home
- Home: tap a banner or card → Product · the heart toggles the wishlist · the cart button opens a product · Profile tab → Onboarding (demo)
- Product: back pops the stack; the heart toggles the wishlist

## 9. Assets

| File | Product |
|---|---|
| `hero.png` | Onboarding shoe (navy/blue/lime) |
| `neon.png` | AIR MAX 5 (volt) |
| `pluse.png` | Air Max Pluse (grey/red air) |
| `pegasus.png` | Air Zoom Pegasus 41 (black/teal) |
| `am2027.png` | AIR MAX 2027 (white/red/blue) |

New shoe images: side view, transparent background, cropped tight, no logos or text.

## 10. Screens

| Screen | Status |
|---|---|
| Onboarding | ✅ |
| Home | ✅ |
| Product detail | ✅ |
| Shop, Wishlist, Bag/Checkout, Profile | **TODO** |

## 11. Adding a screen: checklist
1. Add it in `screens.jsx` and route it in `Phone3`.
2. Use Anton only for hero titles and prices; everything else is DM Sans.
3. One purple action per view; commerce actions use a black pill.
4. Keep ≥ 60px bottom clearance for the nav or buy bar.
5. Update §10.