designmd-forge 1.2.0

package/dist/data/designs/ios-swiggy.md

@@ -0,0 +1,432 @@
+# Design System Inspiration of Swiggy (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Swiggy's iOS app is **appetite-driven commerce**. The entire visual language exists to do one thing: make you hungry, then make ordering feel instantaneous. The canvas is white (`#FFFFFF`) in light mode and a near-black charcoal (`#121212`) in dark mode, but the canvas is almost never what you notice — what you notice is the *food*. Every screen is photo-forward: 16:10 restaurant hero images with a dark bottom scrim that holds an offer in bold white type ("60% OFF UPTO ₹120"), square dish thumbnails with a floating green "ADD" button, and a relentless rhythm of cards that pull the eye down the list.
+
+The signature screen is the **restaurant list** (the "Swiggy" / Food home tab): a sticky location header ("Home ⌄" with the delivery address beneath it), an orange-iconed search pill ("Search 'biryani'"), a horizontally-scrolling filter chip row (Filter, Under 30 mins, Rating 4.0+, Pure Veg, Offers), and then the restaurant cards themselves. Each card is a complete decision unit: photo + offer overlay, restaurant name in heavy 18pt, a green rating chip (`#48C479` with the score and a star), delivery-time and distance metadata, cuisine tags, and a dashed-divider footer carrying a free-delivery or coupon line in Swiggy Orange. The second signature surface is the **restaurant menu / dish list** — vegetarian/non-veg marks (the green-dot-in-a-square, red-triangle-in-a-square), dish name, price, a green in-card rating, a description, and a square food image with the bottom-overlapping "ADD" button + customisation "›" hint.
+
+The color system is built around a single, unmistakable hero: **Swiggy Orange `#FC8019`**. It is warm, energetic, slightly tangy — engineered to read as "fresh food, fast." It is the primary CTA, the active tab, the search/location icons, the footer accent, and the brand wordmark plate. Supporting it: the **rating green `#48C479`** (high ratings) and **rating amber `#DB7C38`** (lower ratings) for the trust signal Swiggy users scan first; **Instamart magenta-purple `#982C61`** for the grocery vertical; and **Dineout red `#D7385E`** for table-booking. Offers are rendered as gradient chips (orange→red) or bold scrim text. The palette is deliberately small and loud — Swiggy is not a calm app, it is a *crave-and-tap* app.
+
+Typography is a clean grotesque. Swiggy's brand face is a proprietary/Proxima-Nova-lineage sans (the product historically uses ProximaNova and a Basis-Grotesque-style UI face); on iOS it falls back to SF Pro when a bundled face is unavailable. The hierarchy is heavy and confident: screen titles at 32pt/800, restaurant card names at 18pt/800, body at 16pt/400. Weight does the work — Swiggy leans on 700/800 to make food names and prices unmissable.
+
+**Key Characteristics:**
+- White canvas (`#FFFFFF`) light / near-black charcoal (`#121212`) dark — but the screen is carried by food photography, not chrome
+- Single hero accent: **Swiggy Orange `#FC8019`** — CTA, active tab, icons, footer accent, wordmark
+- Photo-forward restaurant cards — 16:10 hero image + dark bottom scrim + bold white offer text
+- Green rating chip (`#48C479`) / amber (`#DB7C38`) — the trust signal users scan first, always pill-shaped with a star
+- Sticky location header — "Home ⌄" + delivery address, with avatar at trailing edge
+- Veg / non-veg marks — green-dot-in-square / red-triangle-in-square, mandatory on every dish (Indian FSSAI convention)
+- Floating "ADD" button — green-outline, bottom-overlapping the square dish image, with a customisation "›"
+- Dashed-divider card footers — free-delivery / coupon line in Swiggy Orange
+- Filter chip row — horizontally scrollable, 8pt-radius rounded rectangles, active state filled
+- Multi-vertical tab bar — Swiggy (food), Instamart (grocery), Dineout (table booking), Cart
+- Offer chips — orange→red gradient or white-on-scrim bold type ("60% OFF UPTO ₹120")
+- Heavy grotesque type — screen titles 32pt/800, food names 18pt/800; weight carries hierarchy
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Swiggy Orange** (`#FC8019`): The brand. Primary CTA background, active tab, search/location icons, footer accent links, wordmark plate, segmented-control selection.
+- **Swiggy Orange Pressed** (`#E06D0C`): Pressed/active state for orange CTAs.
+- **Swiggy Orange Tint** (`#FC80191A`): 10% orange wash behind selected chips, promo banners.
+
+### Rating & Trust
+- **Rating Green** (`#48C479`): Rating chips for scores ≥ 4.0 — the single most-scanned element on a card.
+- **Rating Amber** (`#DB7C38`): Rating chips for scores 3.0–3.9.
+- **Rating Red** (`#E84A4A`): Rating chips for scores < 3.0 (rare; also error).
+
+### Vertical Accents
+- **Instamart Purple** (`#982C61`): Instamart (grocery) tab, headers, CTAs within Instamart.
+- **Dineout Red** (`#D7385E`): Dineout (table booking) tab and accents.
+- **Offer Gradient** (`#FC8019` → `#D7385E`): Discount chips, hero offer banners.
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Primary light canvas.
+- **Surface Gray** (`#F4F4F6`): Search pill fill, chip backgrounds, sectioned groups.
+- **Surface Pressed** (`#ECECEE`): Pressed rows / chips.
+- **Divider** (`#E2E2E7`): Hairline dividers; dashed variant on card footers.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#121212`): Primary dark canvas — near-black, NOT pure black.
+- **Dark Surface 1** (`#1C1C1E`): Card backgrounds, search pill, sheets.
+- **Dark Surface 2** (`#2A2A2A`): Elevated chips, "ADD" button background.
+- **Dark Divider** (`#2C2C2E`): Hairline dividers; dashed variant on footers.
+
+### Text
+- **Text Primary Light** (`#02060C`): Primary text — near-black, slightly cool.
+- **Text Secondary Light** (`#686B78`): Metadata, cuisine tags, distance.
+- **Text Tertiary Light** (`#93959F`): Disabled, very-low-emphasis.
+- **Text Primary Dark** (`#F2F2F2`): Primary text on dark.
+- **Text Secondary Dark** (`#A0A0A0`): Metadata on dark.
+- **Text Tertiary Dark** (`#6A6A6A`): Disabled on dark.
+
+### Roles Summary
+
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Canvas | `#FFFFFF` | `#121212` |
+| Surface 1 | `#F4F4F6` | `#1C1C1E` |
+| Surface 2 | `#ECECEE` | `#2A2A2A` |
+| Divider | `#E2E2E7` | `#2C2C2E` |
+| Text Primary | `#02060C` | `#F2F2F2` |
+| Text Secondary | `#686B78` | `#A0A0A0` |
+| Brand / CTA | `#FC8019` | `#FC8019` |
+| Rating (high) | `#48C479` | `#48C479` |
+| Rating (mid) | `#DB7C38` | `#DB7C38` |
+| Error | `#E84A4A` | `#E84A4A` |
+
+### Semantic
+- **Success Green** (`#48C479`): Order-placed, rating, "Free delivery" confirmation.
+- **Error Red** (`#E84A4A`): Payment failure, item-unavailable, destructive delete.
+- **Warning Amber** (`#DB7C38`): "Few items left", surge-fee notice.
+- **Info Blue** (`#1A73E8`): Informational links inside checkout.
+- **Veg Mark** (`#48C479`): Vegetarian indicator square + dot.
+- **Non-Veg Mark** (`#E84A4A` / classic `#A1303A`): Non-veg indicator square + triangle.
+
+## 3. Typography Rules
+
+### Font Family
+- **Brand / Display**: `ProximaNova` lineage — Swiggy's marketing & heavy headings face (geometric humanist sans).
+- **UI / Text**: `Basis Grotesque`-style grotesque for body and metadata (neutral, highly legible at small sizes).
+- **iOS Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Web/Catalog Fallback**: `Plus Jakarta Sans` (close geometric humanist match for documentation/preview)
+- Numerals are tabular in price, rating, and delivery-time contexts so columns align.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | ProximaNova | 32pt | 800 | 1.2 | -0.4pt | "Restaurants", nav large-title |
+| Hero | ProximaNova | 26pt | 800 | 1.25 | -0.3pt | "What's on your mind?" |
+| Section Header | ProximaNova | 22pt | 700 | 1.3 | -0.2pt | "Top restaurant chains" |
+| Card Title (Restaurant) | ProximaNova | 18pt | 800 | 1.3 | -0.3pt | Restaurant name on card |
+| Subsection | ProximaNova | 17pt | 700 | 1.35 | -0.2pt | "Recommended", category headers |
+| Body | Basis Grotesque | 16pt | 400 | 1.5 | 0pt | Descriptions, paragraph copy |
+| Dish Title | Basis Grotesque | 15pt | 600 | 1.4 | 0pt | Menu item name |
+| Price | Basis Grotesque | 14pt | 600 | 1.4 | 0pt | "₹289" — tabular numerals |
+| Meta | Basis Grotesque | 14pt | 400 | 1.4 | 0pt | Cuisine tags, distance, ETA |
+| Rating Chip | Basis Grotesque | 12pt | 700 | 1.0 | 0pt | Score in green/amber pill |
+| Offer / Badge | ProximaNova | 12pt | 800 | 1.1 | 0.3pt | "60% OFF UPTO ₹120" |
+| Button (Primary) | ProximaNova | 15pt | 700 | 1.0 | 0.2pt | UPPERCASE — "CONTINUE" |
+| Button (ADD) | ProximaNova | 13pt | 800 | 1.0 | 0.3pt | UPPERCASE green-outline |
+| Caption | Basis Grotesque | 12pt | 400 | 1.4 | 0pt | Tiny print, T&C |
+| Tab Label | Basis Grotesque | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+| Location Title | ProximaNova | 17pt | 800 | 1.2 | -0.2pt | "Home ⌄" header |
+
+### Principles
+- **Weight carries hierarchy**: Swiggy concentrates emphasis at 700/800. Restaurant names, prices, and offers are heavy so the eye locks onto them while scrolling fast.
+- **UPPERCASE for action**: Primary CTAs and the "ADD" button are uppercase with +0.2–0.3pt tracking — it signals "commit."
+- **Tabular numerals everywhere money/time appears**: prices, ETAs, ratings align in columns.
+- **Display vs UI split**: ProximaNova-lineage for headings and actions; the grotesque for dense metadata and descriptions.
+- **Dynamic Type**: titles, body, descriptions scale; rating chips, tab labels, veg marks, and offer badges stay fixed (layout-critical).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Continue / Pay / Place Order)**
+- Shape: Rounded rectangle, 12pt corner radius
+- Background: `#FC8019` (Swiggy Orange)
+- Text: `#FFFFFF`, ProximaNova 15pt weight 700, UPPERCASE, +0.2pt tracking
+- Padding: 14pt vertical, 28pt horizontal (full-width in checkout/cart)
+- Pressed: background `#E06D0C` + scale 0.98
+- Disabled: background `#E2E2E7` / `#2A2A2A`, text `#93959F`
+
+**Secondary / Outline Button (Repeat Last Order / Customise)**
+- Background: transparent
+- Border: 1.5pt `#FC8019`
+- Text: `#FC8019`, ProximaNova 13pt weight 700, UPPERCASE
+- Corner radius: 10pt
+- Padding: 11pt vertical, 20pt horizontal
+- Pressed: background `#FC80191A`
+
+**ADD Button (the signature dish CTA)**
+- Background: `#FFFFFF` light / `#2A2A2A` dark
+- Border: 1pt `#48C479`
+- Text: `#48C479` (or `#1BA672` light), ProximaNova 13pt weight 800, UPPERCASE
+- Corner radius: 10pt
+- Padding: 7–9pt vertical, 22–26pt horizontal
+- Shadow: `rgba(0,0,0,0.5) 0 4px 12px`
+- Position: bottom-overlapping the dish image by -12pt, horizontally centered
+- After tap: morphs into a `[ − qty + ]` stepper with the same border/colour
+
+**Text Button (View Full Menu / Show More)**
+- Text: `#FC8019`, ProximaNova 13pt weight 700, UPPERCASE
+- No background, no border
+- Pressed: opacity 0.6
+
+**Stepper (Quantity)**
+- Pill, 10pt radius, 1pt `#48C479` border
+- `−` and `+` glyphs in green, quantity centered in green 800
+- Min height 32pt; matches the ADD button footprint exactly
+
+### Core Atoms
+
+**Rating Chip**
+- Pill, 6pt corner radius
+- Background: `#48C479` (≥4.0) / `#DB7C38` (3.0–3.9) / `#E84A4A` (<3.0)
+- Content: 10pt white star polygon + score in white, Basis Grotesque 12pt weight 700
+- Padding: 2pt vertical, 6pt horizontal
+- Always immediately left of the ETA / distance metadata
+
+**Veg / Non-Veg Mark**
+- 16pt square, 1.5pt border, 3pt corner radius
+- Veg: green border `#48C479`, centered 7pt green filled dot
+- Non-veg: red border `#E84A4A`, centered upward triangle
+- Mandatory leading element on every dish row
+
+**Offer Badge / Chip**
+- On photo: white ProximaNova 16pt/800 over the scrim with an 11pt/600 sub ("UPTO ₹120")
+- Standalone chip: gradient `#FC8019 → #D7385E`, 8pt radius, white 12pt/800 UPPERCASE
+- Swiggy One badge: 1pt orange border, transparent, `#FC8019` 11pt/800
+
+**Filter Chip**
+- Rounded rectangle, 8pt corner radius
+- Default: `#FFFFFF`/`#1C1C1E` fill, 1pt `#E2E2E7`/`#2C2C2E` border, text `#02060C`/`#F2F2F2` 12pt/600
+- Active: `#ECECEE`/`#2A2A2A` fill, border `#686B78`, optional leading icon
+- Height: 32pt; horizontally scrollable row, 8pt gap
+
+**Card Footer (Free-Delivery Strip)**
+- Separated from card body by a 1pt **dashed** divider (`#E2E2E7`/`#2C2C2E`)
+- Leading 13pt clock/percent icon in `#FC8019`
+- Text: `#FC8019`, 12pt weight 700 — "Free delivery on orders above ₹199"
+
+### Navigation
+
+**Sticky Location Header**
+- Leading: 18pt orange map-pin `#FC8019`
+- Title: "Home ⌄" — ProximaNova 17pt/800, chevron 14pt
+- Sub-line: full delivery address, 12pt `#686B78`, indented to align under title
+- Trailing: 34pt circular profile avatar
+- Collapses into a compact bar on scroll; search pill can pin under it
+
+**Search Pill**
+- Height: 46pt
+- Background: `#F4F4F6` / `#1C1C1E`
+- Corner radius: 14pt
+- Leading 18pt orange `magnifyingglass`; trailing 18pt orange `mic`
+- Placeholder: rotating ("Search 'biryani'", "Search 'cake'") `#686B78`/`#A0A0A0` 14pt/500
+
+**Bottom Tab Bar**
+- Height: 70pt incl. safe area
+- Background: `rgba(255,255,255,0.94)` / `rgba(18,18,18,0.94)` with blur, 0.5pt top divider
+- Tabs (4): **Swiggy** (food/home), **Instamart** (grocery), **Dineout** (table booking), **Cart**
+- Icon 22pt; active = filled glyph in `#FC8019`; inactive = stroke `#888`
+- Labels always shown, 10pt weight 600
+- Cart shows a count badge (orange dot, white number)
+
+**Top Nav (Restaurant detail)**
+- Transparent over the hero image, gradient-scrim backed
+- Leading back chevron (white over image, `#02060C` once scrolled)
+- Trailing: search, share, favourite (heart)
+- Sticky category strip appears once the menu starts scrolling
+
+### Input Fields
+
+**Search Field (active)**
+- Same 46pt pill; on focus, border becomes 1pt `#FC8019`, cursor orange
+- Recent searches and trending dishes shown below as tappable rows
+
+**Address / Form Field**
+- Height: 52pt
+- Background: `#F4F4F6` / `#1C1C1E`
+- Corner radius: 12pt
+- Label floats to 11pt `#686B78` on focus; text `#02060C`/`#F2F2F2` 15pt
+- Focus: 1pt `#FC8019` border
+- Error: 1pt `#E84A4A` border + 12pt red helper text
+
+**Coupon Field**
+- Inline within cart, dashed `#686B78` border, 8pt radius
+- "APPLY" trailing text button in `#FC8019` 13pt/800 UPPERCASE
+
+### Distinctive Components
+
+**Photo-Forward Restaurant Card**
+- Full-bleed 16:10 image, 16pt corner radius
+- Bottom scrim: `linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78) 100%)`
+- Offer text bottom-left in white ProximaNova 16pt/800 + 11pt/600 sub
+- Top-left optional "AD" flag (`rgba(0,0,0,0.4)` pill, white 10pt/700)
+- Top-right favourite heart in a 32pt `rgba(0,0,0,0.4)` circle
+- Below image: name (18pt/800) → rating chip + " · " + ETA (14pt/600) → cuisine tags (14pt `#686B78`) → locality · distance → dashed footer
+
+**Dish Row (Menu Item)**
+- Leading veg/non-veg mark
+- Name 15pt/700 → price 14pt/600 → in-card green rating "4.5 (1.2K)" → 2-line description 12pt `#686B78`
+- Trailing 110pt square image with the bottom-overlapping **ADD** button / stepper
+- "More Details ›" link if customisable
+
+**Offer / Coupon Sheet**
+- Bottom sheet, 20pt top corners
+- Each coupon: dashed-bordered card, code in mono-ish bold, savings line in `#48C479`, "APPLY" orange text button
+
+**Cart Bar (floating)**
+- Pinned above the tab bar when items exist
+- Orange `#FC8019` rounded bar: "N items | ₹XXX" left, "VIEW CART ›" right, white ProximaNova 14pt/800
+- Slides up with spring when first item added
+
+**Live Order Tracking**
+- Map with the delivery partner's animated pin (orange)
+- Stepped progress: Order Placed → Preparing → On the way → Delivered
+- ETA in heavy ProximaNova; partner name + call button row
+
+**Instamart Switch**
+- Tapping Instamart tab re-themes accents to `#982C61` (purple) while keeping the same layout grammar — proves the system flexes per vertical
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+- Card vertical gap: 22pt (cards breathe; food needs air)
+- Screen horizontal inset: 16pt
+- Intra-card content gaps: 4–6pt (tight, scannable)
+- Section header top margin: 16pt
+
+### Grid & Container
+- iPhone: single-column card list, 16pt insets, full-width photos
+- Horizontal carousels (top chains, what's on your mind): 8–12pt gap, peek of next item
+- iPad: 2-column restaurant grid, max content width 760pt centered, 24pt insets
+- Dish image is a fixed 110×110pt square; ADD button overlaps by -12pt
+
+### Whitespace Philosophy
+- **Photos earn the space**: the largest element on any card is the food image — chrome is minimal so imagery dominates
+- **22pt between cards**: deliberate breathing room so each restaurant is a discrete decision
+- **Dashed dividers, not boxes**: footers and dish rows are separated by dashed hairlines, never heavy borders or nested cards
+- **One loud accent**: only Swiggy Orange (and the rating green) carry colour weight; everything else is neutral so the eye goes to action + trust
+
+### Border Radius Scale
+- Square (0pt): full-bleed hero edges, dividers
+- Subtle (6pt): rating chips, small badges
+- Compact (8pt): filter chips, offer chips
+- Standard (10–12pt): buttons, search pill, form fields, ADD button
+- Card (16pt): restaurant photos, dish thumbnails
+- Sheet (20pt): bottom sheets (offers, customise, address)
+- Pill (500pt): qty steppers, toggle switches
+- Circle (50%): avatars, favourite-heart background
+
+## 6. Depth & Elevation
+
+Swiggy is mostly flat; elevation is reserved for "this floats above the list and demands a tap."
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Restaurant cards, dish rows, chips on the page |
+| Lifted (Level 1) | `rgba(0,0,0,0.12) 0 2px 8px` light / `rgba(0,0,0,0.5) 0 4px 12px` dark | The floating **ADD** button, qty stepper |
+| Floating Bar (Level 2) | `rgba(252,128,25,0.35) 0 6px 16px` | The orange floating cart bar |
+| Sheet (Level 3) | `rgba(0,0,0,0.12) 0 -4px 24px` | Bottom sheets (offers, customise, address picker) |
+| Modal Overlay | `rgba(0,0,0,0.5)` | Dim behind sheets and dialogs |
+
+**Shadow Philosophy**: Cards themselves are flat (a 1pt divider or the photo edge defines them). Shadow appears only on the ADD button, the floating cart bar, and bottom sheets — each is a "tap me / acknowledge me" surface. The ADD button's shadow is what makes it feel like it's *hovering over the food*, ready to be pressed. On dark mode, shadows deepen (0.5 opacity) and bottom sheets gain a 1pt `#2C2C2E` top border as a secondary elevation cue.
+
+### Motion
+- **ADD → Stepper morph**: ADD button cross-fades to `[ − 1 + ]` over 180ms ease-out; soft haptic on tap
+- **Cart bar reveal**: slides up from above the tab bar, 280ms spring (damping 0.8) when the first item is added; the price counter rolls
+- **Card tap → restaurant**: hero image shared-element zoom into the detail screen, 320ms ease-out
+- **Filter chip select**: fill colour cross-fades 150ms; list re-sorts with a 200ms fade-through
+- **Pull-to-refresh**: orange Swiggy spinner; haptic tick on release
+- **Live tracking**: delivery pin animates along the route at a steady tween; step ticks advance with a soft pop
+- **Bottom sheet**: slides up 300ms ease-out; dim fades in parallel; drag-to-dismiss with rubber-banding
+- **Scrim/offer text**: appears with the image (no separate animation) — feels instantaneous
+- **Haptics**: soft impact on ADD, medium on "Place Order" success, light tick on chip toggle and pull-to-refresh
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Swiggy Orange (`#FC8019`) as the single hero accent — CTA, active tab, icons, footer
+- Lead every restaurant card with a large 16:10 photo + dark bottom scrim + bold white offer text
+- Put a green/amber rating chip (`#48C479` / `#DB7C38`) immediately before the ETA — it's the first thing users scan
+- Show veg/non-veg marks on every dish (green-dot-square / red-triangle-square)
+- Make the dish "ADD" button green-outline, bottom-overlapping the square image, with a shadow so it floats
+- Use uppercase + tracking on primary CTAs and ADD
+- Separate card footers and dish rows with dashed hairlines, never nested boxes
+- Float an orange cart bar above the tab bar when items exist
+- Use tabular numerals for prices, ETAs, and ratings
+- Re-theme accents per vertical (Instamart purple `#982C61`, Dineout red `#D7385E`) while keeping the same layout grammar
+- Keep dark mode near-black (`#121212`) with full-saturation food photography
+
+### Don't
+- Don't introduce a second loud brand colour competing with Swiggy Orange
+- Don't shrink food photography or crop it square on list cards — 16:10 hero is the standard
+- Don't hide or restyle the rating chip — it must be the green/amber pill with a star, left of ETA
+- Don't omit veg/non-veg marks on dishes — it's a hard requirement in this market
+- Don't make the ADD button a plain text link — it's a green-outline, shadowed, overlapping control
+- Don't box every section in heavy cards — Swiggy uses dashed dividers and whitespace
+- Don't use pure black (`#000000`) for the dark canvas — `#121212` is correct
+- Don't desaturate or dim food imagery in dark mode — UI chrome recedes, food does not
+- Don't animate aggressively — motion is fast and functional (150–320ms), tied to the order flow
+- Don't bury the cart — it floats persistently once non-empty
+- Don't use sentence-case timid CTAs — Swiggy commits with uppercase action verbs
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Single column; restaurant photo ~210pt tall; compact location header |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; location header respects it |
+| iPhone 15/16 Pro Max | 430pt | Larger photos (~250pt), more peek on carousels |
+| iPad (portrait) | 768pt | 2-column restaurant grid; content max 760pt centered |
+| iPad (landscape) | 1024pt+ | 2–3 column grid; persistent cart panel on the right |
+
+### Dynamic Type
+- Screen titles, section headers, body, descriptions: full scale
+- Rating chips, offer badges, tab labels, veg marks, qty steppers: FIXED (layout-critical)
+- Prices scale one step then truncate gracefully
+
+### Orientation
+- iPhone: portrait-locked for the order flow (standard for the category)
+- iPad: supports landscape with a 2–3 column grid + sticky cart panel
+
+### Touch Targets
+- ADD button / stepper: ≥ 32pt tall, 44pt hit area
+- Filter chip: 32pt tall, full-chip tap
+- Tab bar icon: 22pt glyph, 44pt+ hit
+- Rating chip: not tappable (informational)
+- Restaurant card: full-card tap target
+
+### Safe Area Handling
+- Top: location header + Dynamic Island respected; hero image bleeds under status bar with scrim
+- Bottom: floating cart bar sits above the tab bar, both above the home indicator
+- Keyboard: address/coupon forms scroll above keyboard; sticky CTA pins above it
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF`
+- Canvas (dark): `#121212`
+- Surface (dark card): `#1C1C1E`
+- Divider: `#E2E2E7` light / `#2C2C2E` dark (dashed on footers)
+- Text primary: `#02060C` light / `#F2F2F2` dark
+- Text secondary: `#686B78` light / `#A0A0A0` dark
+- Brand / CTA: **Swiggy Orange `#FC8019`** (pressed `#E06D0C`)
+- Rating green: `#48C479` · Rating amber: `#DB7C38`
+- Instamart purple: `#982C61` · Dineout red: `#D7385E`
+- Offer gradient: `#FC8019 → #D7385E`
+- Veg mark: `#48C479` · Non-veg mark: `#E84A4A`
+
+### Example Component Prompts
+- "Build the Swiggy restaurant card in SwiftUI: full-bleed 16:10 image with 16pt corner radius. Overlay a bottom scrim `linear-gradient(transparent 45%, rgba(0,0,0,0.78))`. Bottom-left offer text in ProximaNova 16pt weight 800 white ('60% OFF') with an 11pt weight 600 sub ('UPTO ₹120'). Top-left 'AD' pill (`rgba(0,0,0,0.4)`, white 10pt/700). Top-right favourite heart in a 32pt `rgba(0,0,0,0.4)` circle. Below: restaurant name ProximaNova 18pt/800 `#F2F2F2`; a row with a green `#48C479` rating chip (white star + '4.4', 6pt radius, 12pt/700) then ' · ' then '30–35 mins' 14pt/600; cuisine tags 14pt `#A0A0A0`; locality · distance; then a 1pt dashed `#2C2C2E` divider and a footer line in `#FC8019` 12pt/700 with a leading clock icon."
+
+- "Create the Swiggy dish row: leading 16pt veg mark (1.5pt `#48C479` square, centered 7pt green dot). Dish name 15pt/700 `#F2F2F2`; '₹289' 14pt/600; an inline green rating '4.5 (1.2K)' with a star; a 2-line description 12pt `#A0A0A0`. Trailing 110×110pt food image, 14pt radius, with a white/`#2A2A2A` 'ADD' button (1pt `#48C479` border, `#48C479` text, ProximaNova 13pt/800 UPPERCASE, 10pt radius, `rgba(0,0,0,0.5) 0 4px 12px` shadow) overlapping the image bottom by -12pt, horizontally centered. On tap, morph ADD into a `[ − 1 + ]` stepper with the same border."
+
+- "Render the Swiggy sticky location header: leading 18pt orange `#FC8019` map-pin; 'Home' in ProximaNova 17pt/800 `#F2F2F2` with a 14pt chevron-down; sub-line full address 12pt `#A0A0A0` indented under the title; trailing 34pt gradient circular avatar (`#FC8019 → #D7385E`). Below it a 46pt search pill, `#1C1C1E` fill, 14pt radius, leading orange magnifyingglass + trailing orange mic, placeholder 'Search \"biryani\"' 14pt/500 `#A0A0A0`."
+
+- "Build the Swiggy bottom tab bar: 4 tabs — Swiggy (house, food/home), Instamart (grid), Dineout (paper-plane), Cart (cart with count badge). 22pt icons; active = filled glyph in `#FC8019`; inactive = stroke `#888`; labels always shown 10pt/600. Background `rgba(18,18,18,0.94)` with blur and a 0.5pt `#2C2C2E` top divider."
+
+- "Create the Swiggy floating cart bar: pinned above the tab bar when items exist. Orange `#FC8019` rounded bar (12pt radius), left 'N items | ₹XXX' and right 'VIEW CART ›' in white ProximaNova 14pt/800. Slides up with a 280ms spring (damping 0.8) when the first item is added; the price counter rolls."
+
+- "Render the Swiggy filter chip row: horizontally scrollable, 8pt gap, 16pt insets. Each chip 32pt tall, 8pt corner radius. Default: `#1C1C1E` fill, 1pt `#2C2C2E` border, text `#F2F2F2` 12pt/600. Active: `#2A2A2A` fill, `#686B78` border, optional leading 12pt icon. First chip 'Filter' has a leading sliders icon."
+
+### Iteration Guide
+1. Swiggy Orange (`#FC8019`) is the only loud accent — CTA, active tab, icons, footer; pressed `#E06D0C`
+2. Every restaurant card is photo-first: 16:10 image + dark bottom scrim + bold white offer text
+3. The green/amber rating chip (`#48C479` / `#DB7C38`) sits left of the ETA — the most-scanned element
+4. Veg/non-veg marks are mandatory on dishes (green-dot-square / red-triangle-square)
+5. The dish ADD button is green-outline, shadowed, overlapping the square image bottom by -12pt; morphs to a stepper
+6. Footers and dish rows use dashed hairlines, never nested boxes
+7. A floating orange cart bar appears above the tab bar once items exist
+8. Primary CTAs and ADD are UPPERCASE with +0.2–0.3pt tracking
+9. Dark canvas is `#121212` (near-black); food photography stays full-saturation
+10. Verticals re-theme the accent (Instamart `#982C61`, Dineout `#D7385E`) but keep the same card/list grammar