designmd-forge 1.2.0

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

@@ -0,0 +1,439 @@
+# Design System Inspiration of Zomato (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Zomato's iOS app is a dual-purpose restaurant platform: it is both a **food-delivery** app and a **dining-out / discovery** app, and the entire design system is organized around that split. The canvas is pure white (`#FFFFFF`) and the brand color is the unmistakable **Zomato Red** (`#E23744`) — used for the logomark, the primary action, the active tab, the "ADD" affordance and key CTAs. But the most distinctive element of Zomato's visual language is its **rating pill**: a small, bold, color-coded chip showing a numeric score with a star — and that chip's color is *semantic*. Green (`#267E3E`) means a great rating, amber (`#DB7C38`) means average, and red (`#E23744`) means poor. The rating pill appears everywhere — on restaurant cards, restaurant headers, and individual dishes — and its color is the single fastest signal in the entire app.
+
+The two signature UI moments are the **restaurant detail screen** and the **order flow**. The detail screen opens with a full-bleed food/storefront hero photo (~200pt) under a transparent nav (back + search + heart in dark scrims), then an info card that pulls up over the photo with a rounded-22pt top, the restaurant name in heavy 24pt, a cuisine·locality·distance meta line, and **two rating pills side by side** — one for Delivery, one for Dining — each with its review count underlined below it. Under that sits the **Delivery / Dining Out segmented toggle** (a pill segment, active half filled Zomato Red) that re-themes the whole screen: Delivery shows a scrollable menu with photo'd items and a bordered red "ADD" button per row; Dining Out shows offers, photos, reviews and a "Book a table" path. Each menu item carries a **veg/non-veg mark** (a small bordered square — green dot = veg, maroon triangle = non-veg, a legal requirement in India that became a brand signature), an optional amber "★ Bestseller" tag, the dish name, price, and its own green rating pill.
+
+Zomato's other recognizable detail is the **bordered "ADD" button**: rather than a solid red fill, the menu add control is a white/surface button with a 1pt Zomato-Red border and red text, sitting half-overlapping the dish thumbnail with a soft shadow. On tap it morphs into a bordered red quantity stepper. The premium tier (**Zomato Pro / Gold**) is signaled with a gold (`#EFC75E`) accent used sparingly on membership surfaces; Dining Out reservation flows lean on a calm blue (`#256FEF`).
+
+Typography is a clean, dense grotesque. Zomato's brand face is a custom sans (Okra-family); the closest free substitute is **Inter** (or system SF Pro). The hierarchy is bold and information-dense — restaurant names 24pt 800, screen titles 900, menu categories 17pt 800, and a lot of small, tightly-set metadata because Zomato pages carry a high density of facts (cuisine, distance, timing, price, rating, review count, veg status).
+
+**Key Characteristics:**
+- Pure white canvas (`#FFFFFF`) light / warm near-black (`#121212`) dark — dense, information-rich
+- **Zomato Red** (`#E23744`) for brand, primary action, active tab, "ADD", key CTAs
+- **Semantic rating pill** — green (`#267E3E`) great / amber (`#DB7C38`) average / red (`#E23744`) poor — the fastest signal in the app
+- **Delivery / Dining Out duality** — a segmented toggle re-themes the screen between the two modes
+- Full-bleed hero photo + info card pulled up over it with a rounded-22pt top — the restaurant detail signature
+- **Veg / non-veg mark** — bordered square: green dot = veg, maroon triangle = non-veg (an India-mandated, brand-defining glyph)
+- **Bordered "ADD" button** — white/surface with a 1pt Zomato-Red border + red text, overlapping the dish thumbnail, morphs into a bordered red stepper
+- Amber "★ Bestseller" tags on popular dishes
+- Two rating pills side-by-side (Delivery + Dining) with underlined review counts on the restaurant header
+- Zomato Pro / Gold signaled with a gold (`#EFC75E`) accent; Dining reservations use a calm blue (`#256FEF`)
+- Bottom tab bar: Delivery / Dining / Live / Profile — active icon tinted Zomato Red
+- Dense, heavy grotesque type — restaurant names 800, screen titles 900, lots of tight metadata
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Zomato Red** (`#E23744`): Primary brand & interactive color — logomark, primary buttons, "ADD", active tab, key CTAs, active segment.
+- **Zomato Red Pressed** (`#C42531`): Pressed/active state on red buttons and controls.
+
+### Rating Scale (Semantic — color encodes the score)
+- **Rating Green** (`#267E3E`): Great rating (≈ 4.0+). Rating pill fill, dish-rating star.
+- **Rating Amber** (`#DB7C38`): Average rating (≈ 3.0–3.9). Rating pill fill, "Bestseller" tag text.
+- **Rating Red** (`#E23744`): Poor rating (< 3.0). Rating pill fill (reuses the brand red).
+- **Rating Grey** (`#9C9C9C`): New / unrated. Neutral pill fill.
+
+### Membership & Dining
+- **Gold (Pro)** (`#EFC75E`): Zomato Pro / Gold membership accents — used sparingly on membership surfaces.
+- **Dining Blue** (`#256FEF`): Dining Out reservation flows, "Book a table", table-booking confirmations.
+
+### Canvas & Surfaces (Light Mode)
+- **Canvas White** (`#FFFFFF`): Primary light canvas.
+- **Surface Gray** (`#F4F4F5`): Search field, segmented control track, subtle cards.
+- **Surface Pressed** (`#EBEBEC`): Pressed rows and cells.
+- **Divider** (`#E8E8E8`): Hairline dividers between menu rows and sections.
+
+### Canvas & Surfaces (Dark Mode)
+- **Dark Canvas** (`#121212`): Primary dark canvas — warm near-black, NOT pure black.
+- **Dark Surface 1** (`#1C1C1E`): Cards, info card, "ADD" button, elevated surfaces.
+- **Dark Surface 2** (`#262629`): Segmented control track, pressed cells.
+- **Dark Divider** (`#2C2C2E`): Hairline dividers.
+
+### Text
+- **Text Primary Light** (`#1C1C1C`): Primary text — near-black, restaurant names, prices.
+- **Text Secondary Light** (`#696969`): Metadata, cuisine, locality, distance.
+- **Text Tertiary Light** (`#9C9C9C`): Disabled, low-emphasis captions.
+- **Text Primary Dark** (`#F2F2F2`): Primary text on dark.
+- **Text Secondary Dark** (`#9C9C9C`): Secondary text on dark (works on both modes).
+
+### Veg / Non-Veg
+- **Veg Green** (`#267E3E`): Veg-mark border + dot (shares the rating green).
+- **Non-Veg Maroon** (`#B91C1C`): Non-veg-mark border + triangle.
+
+### Semantic
+- **Error Red** (`#E03A3A`): Form errors, failed payment, removal confirmation.
+- **Success Green** (`#267E3E`): Order placed, item added confirmation (reuses the rating green).
+- **Warning Amber** (`#DB7C38`): "Closes soon", surge messaging (shares the rating amber).
+- **Info Blue** (`#256FEF`): Dining / reservation informational accents.
+
+### Color Usage Table
+
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Canvas | `#FFFFFF` | `#121212` |
+| Surface 1 | `#F4F4F5` | `#1C1C1E` |
+| Surface 2 | `#EBEBEC` | `#262629` |
+| Divider | `#E8E8E8` | `#2C2C2E` |
+| Text Primary | `#1C1C1C` | `#F2F2F2` |
+| Text Secondary | `#696969` | `#9C9C9C` |
+| Primary Action | `#E23744` | `#E23744` |
+| Rating Great | `#267E3E` | `#267E3E` |
+| Rating Average | `#DB7C38` | `#DB7C38` |
+| Rating Poor | `#E23744` | `#E23744` |
+| Pro / Gold | `#EFC75E` | `#EFC75E` |
+| Dining Blue | `#256FEF` | `#256FEF` |
+
+## 3. Typography Rules
+
+### Font Family
+- **Brand Face**: Zomato's custom grotesque (the company uses an Okra-family humanist sans).
+- **Recommended Substitute (unlicensed clone)**: `Inter` (by Rasmus Andersson, SIL OFL) — geometric humanist grotesque that holds Zomato's dense, heavy-weight feel at small sizes.
+- **System Fallback**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Numerals**: Tabular figures for prices, ratings, review counts and quantity steppers (`font-variant-numeric: tabular-nums`).
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Screen Title | Inter | 32pt | 900 | 1.15 | -0.5pt | "Order food", large nav title |
+| Restaurant Hero | Inter | 24pt | 800 | 1.2 | -0.4pt | Restaurant detail header name |
+| Section Header | Inter | 20pt | 800 | 1.25 | -0.3pt | "Recommended", section title |
+| Menu Category | Inter | 17pt | 800 | 1.3 | -0.2pt | "Kebabs & Starters" |
+| Item Name | Inter | 15pt | 700 | 1.35 | 0pt | Dish name on menu row |
+| Body | Inter | 14pt | 500 | 1.45 | 0pt | Dish description, paragraphs |
+| Price | Inter | 14pt | 700 | 1.3 | 0pt | Prices, totals — tabular |
+| Meta | Inter | 13pt | 400 | 1.4 | 0pt | Cuisine · locality · distance, muted |
+| Rating Pill | Inter | 14pt | 800 | 1.0 | 0pt | Score inside the color pill |
+| Rating Caption | Inter | 11pt | 400 | 1.3 | 0pt | "12.4K Delivery", underlined |
+| Overline / Tag | Inter | 11pt | 800 | 1.0 | 0.4pt | "BESTSELLER", uppercase amber |
+| Button | Inter | 16pt | 800 | 1.0 | 0pt | Primary button label |
+| ADD Button | Inter | 14pt | 800 | 1.0 | 0.3pt | "ADD" on menu rows |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+| Caption | Inter | 12pt | 500 | 1.35 | 0pt | Timestamps, footnotes |
+
+### Principles
+- **Dense and heavy**: Zomato pages carry a lot of facts — names sit at weight 800, screen titles at 900, with tight negative tracking on big type; metadata is small and muted to keep density readable.
+- **The rating number leads**: inside a pill the score is weight 800 — it is the single most-scanned value, so it is always bold and high-contrast on its colored chip.
+- **Color over labels**: a rating's quality is read from the pill color before the number; the veg/non-veg status is read from the mark color, not text.
+- **Muted metadata**: cuisine, locality and distance stay in `#696969` so the photo, name, rating pill and price lead.
+- **Dynamic Type first-class**: screen titles, restaurant names, body and prices scale; rating pills, the veg mark, tags, tab labels stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Add item · ₹320" / "Place order" / "Pay")**
+- Shape: Rounded rectangle, 12pt corner radius
+- Background: `#E23744` (Zomato Red) / same on dark
+- Text: `#FFFFFF`, Inter 16pt weight 800
+- Height: 52pt; padding 14pt × 28pt; often full-width with 16pt insets, embeds price (tabular)
+- Pressed: background `#C42531` + scale 0.98
+- Disabled: `#E23744` at 35% opacity, text 60%
+
+**"ADD" Button (the Zomato signature — bordered, not filled)**
+- Background: `#FFFFFF` / `#1C1C1E` dark (surface, NOT red fill)
+- Border: 1pt `#E23744`
+- Text: `#E23744`, Inter 14pt weight 800, letter-spacing 0.3pt, label "ADD"
+- Shape: 10pt corner radius; padding 8pt × 22pt
+- Position: overlaps the bottom of the dish thumbnail by ~16pt with a soft `0 3px 8px rgba(0,0,0,0.12)` shadow
+- On tap: morphs in place into a bordered red quantity stepper
+
+**Outline / Secondary Button ("Customise" / "Book a table")**
+- Background: transparent (Dining "Book a table" uses Dining Blue text/border)
+- Border: 1.5pt `#E8E8E8` light / `#2C2C2E` dark
+- Text: `#1C1C1C` light / `#F2F2F2` dark, Inter 14pt weight 700
+- Shape: 10pt corner radius; padding 12pt × 20pt
+- Pressed: background `#F4F4F5`
+
+**Text Button ("View full menu" / inline link)**
+- Text: `#E23744` (Zomato Red), Inter 14pt weight 800
+- No background, no underline
+- Pressed: 60% opacity
+
+**Button State Reference**
+
+| State | Primary (Red) | ADD (Bordered) | Outline | Text |
+|-------|---------------|----------------|---------|------|
+| Default | `#E23744` / white | surface / 1pt `#E23744` / `#E23744` | transparent / `#1C1C1C` | `#E23744` |
+| Pressed | `#C42531` + scale 0.98 | bg `#FDECEE` tint | bg `#F4F4F5` | 60% opacity |
+| Active (added) | — | morphs to bordered red stepper | — | — |
+| Disabled | `#E23744` @ 35% / text 60% | border @ 40% / text 40% | border @ 40% | 40% opacity |
+| Focus (a11y) | 2pt `#E23744` ring, 2pt offset | 2pt `#E23744` ring | 2pt ring | underline on focus |
+
+### Core Atoms
+
+**Rating Pill (the signature)**
+- Shape: 7pt corner radius chip, padding 4pt × 9pt
+- Fill: semantic — `#267E3E` (great) / `#DB7C38` (average) / `#E23744` (poor) / `#9C9C9C` (new)
+- Content: a 11pt white star + the score in Inter 14pt weight 800 white
+- On a restaurant header: two pills side-by-side (Delivery + Dining) with an underlined 11pt review-count caption beneath each
+- On a dish row: a smaller green pill or inline star + score + "(218)" count in `#696969`
+
+**Veg / Non-Veg Mark**
+- A 16pt square with a 1.5pt colored border, 3pt corner radius
+- Veg: `#267E3E` border + a centered `#267E3E` dot
+- Non-Veg: `#B91C1C` border + a centered `#B91C1C` triangle
+- Always leads a menu-item row (legally required in India; a brand signature elsewhere)
+
+**Menu Item Row (restaurant detail)**
+- Layout: info block (left) + 96pt thumbnail with the "ADD" button overlapping its bottom (right)
+- Order: veg/non-veg mark → optional amber "★ Bestseller" → name (15pt 700) → price (14pt 700) → rating line (10pt green star + score + count)
+- Description (when present): 14pt `#696969`, 2-line clamp
+- Divider: 1pt `#E8E8E8` between rows
+
+**Bestseller Tag**
+- Inline, leading ★ glyph + "Bestseller" in Inter 11pt 800 amber `#DB7C38` (uppercase optional)
+- No background; sits above the dish name
+
+**Quantity Stepper (bag / after ADD)**
+- A bordered control echoing the ADD button: 1pt `#E23744` border, 10pt radius, surface background
+- `−` / `+` controls 36pt, Zomato-Red glyphs 18pt 800; count 15pt 800 red, 24pt min-width tabular
+- No solid fill — it stays a bordered red control to match the ADD affordance
+
+**Restaurant Card (listing)**
+- Photo: full-width 16:9, 12pt radius; top-right saved heart in a dark scrim
+- Overlaid bottom-left: offer ribbon ("50% OFF up to ₹100") in red/maroon
+- Below: name (16pt 800) + rating pill (right); cuisine·price-for-two (13pt `#696969`); delivery-time + distance line
+
+### Navigation
+
+**Restaurant Detail Top Nav (over hero)**
+- Transparent over the 200pt hero photo; back + search + heart in 34pt `rgba(0,0,0,0.4)` circular scrims with white glyphs
+- Collapses to a solid bar with the restaurant name (compact) once scrolled past the hero
+
+**Delivery / Dining Out Segmented Toggle**
+- A pill segment: track `#F4F4F5` / `#262629` dark, 999px radius, 4pt inner padding
+- Two segments; active half filled Zomato Red `#E23744` with white 13pt 700 text; inactive `#696969`
+- Switching re-themes the screen content (menu vs. offers/reviews/booking)
+
+**Search Field**
+- Height: 46pt; corner radius 10pt; background `#F4F4F5` / `#1C1C1E` dark
+- Leading magnifier 16pt `#696969`; placeholder "Restaurant name or a dish" 14pt `#696969`
+- Focus: 1.5pt `#E23744` border
+
+**Bottom Tab Bar**
+- Height: 52pt + safe area
+- Background: `#FFFFFF` / `rgba(18,18,18,0.94)` blurred dark, 0.5pt top divider
+- Tabs (4): Delivery, Dining, Live, Profile
+- Icon size: 22pt; active color `#E23744` (icon fills); inactive `#888`
+- Labels: Inter 10pt weight 600, always shown
+
+### Input Fields
+
+**Text Field (address, instructions, search)**
+- Height: 48pt; corner radius 10pt; background `#F4F4F5` / `#1C1C1E` dark
+- Border: none default; focus 1.5pt `#E23744`
+- Label: floating 12pt `#696969`; input 16pt `#1C1C1C`
+- Error: 1.5pt `#E03A3A` border + helper text `#E03A3A` 12pt
+
+**Search-with-results (restaurant / dish search)**
+- Same field; results below as rows: leading 44pt rounded-8pt thumbnail, title 15pt 700, rating pill trailing
+- Pressed row: `#EBEBEC`
+
+### Distinctive Components
+
+**Semantic Rating Pill**
+- The defining Zomato component: a color-coded score chip whose fill *is* the rating quality (green/amber/red). Appears on cards, headers and dishes — the fastest signal in the app
+
+**Veg / Non-Veg Mark**
+- The India-mandated bordered-square glyph (green dot / maroon triangle) on every menu item — instantly recognizable as Zomato/Indian-food UX
+
+**Bordered "ADD" → Stepper**
+- The white-with-red-border ADD button overlapping the dish thumbnail that morphs into a bordered red stepper — Zomato's signature add gesture
+
+**Delivery / Dining Out Toggle**
+- The screen-level segmented control that switches the entire restaurant detail between delivery (menu + ADD) and dining (offers + reviews + book-a-table)
+
+**Hero + Pull-Up Info Card**
+- Full-bleed hero photo with a rounded-22pt info card sliding up over it carrying name, meta and the dual rating pills
+
+**Offer Ribbon**
+- A bold red/maroon offer strip on restaurant cards and headers ("50% OFF up to ₹100", "Free delivery")
+
+**Zomato Pro / Gold Banner**
+- A gold-accented (`#EFC75E`) membership card promising extra discounts and free delivery — used sparingly
+
+**Live Order Tracking**
+- A map with the rider marker, an ETA headline, and a status strip ("Restaurant accepted → Food being prepared → Rider picked up → Delivered") in Zomato Red progress
+
+**Item Customization Sheet**
+- Bottom sheet, 22pt top radius (matching the detail pull-up card); dish photo (16:9, 12pt radius) + veg/non-veg mark + name 20pt 800 + price 14pt 700 tabular
+- Option groups: title 15pt 700 + "Required" / "Add up to 3" subtitle in `#696969` 12pt; choice rows with a leading Zomato-Red `#E23744` radio/checkbox when chosen, label 14pt 500, "+ ₹40" delta trailing
+- Sticky red 12pt-radius button: "Add item · ₹360" with the live tabular total
+
+**Cart / Bag Sheet**
+- Bottom sheet, 22pt top radius; line items each with the veg/non-veg mark, name, the bordered red stepper, and price; "Save more with Gold" gold-accented row
+- Bill summary (item total, taxes, delivery) and a sticky red "Proceed to Pay · ₹612" button (tabular)
+
+**Offer Ribbon**
+- A bold red/maroon strip on cards and the restaurant header — "50% OFF up to ₹100", "Free delivery" — 12pt 800 white on `#E23744`, 4pt radius; an applied-offer row in the cart shows the saved amount in green `#267E3E`
+
+**Zomato Pro / Gold Banner**
+- A gold-accented (`#EFC75E`) membership card on the home and cart promising extra discounts + free delivery; leading crown glyph, 12pt radius, used sparingly and never in the chrome
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 14, 16, 18, 22, 24, 32, 40, 48
+- Menu row vertical padding: 14pt; section header bottom margin: 14pt
+- Screen horizontal inset: 16–18pt
+- Info card overlap over hero: -22pt with a 22pt top radius
+
+### Grid & Container
+- iPhone: single-column dense list at 16–18pt insets; hero photos full-bleed
+- iPad: 2-column restaurant grid at 24pt insets, max content width 900pt centered
+- Menu screen: single-column item rows; sticky category nav + a floating "Menu" / search button
+- Listing feed: full-width cards with 16:9 photos
+
+### Whitespace Philosophy
+- **Density with rhythm**: Zomato is information-dense by design; 14pt row padding and clear 17–20pt 800 category headers keep the high fact-count scannable
+- **Color does the sorting**: rating pills and veg marks let the eye triage quality and dietary fit without reading — that is the whitespace strategy
+- **Photo-anchored detail**: the hero photo + pull-up card give the detail screen a strong focal entrance before the dense menu begins
+- **The ADD button breathes**: it overlaps the thumbnail with a small shadow so it is always findable in the dense list
+
+### Border Radius Scale
+- Square (0pt): full-bleed hero, dividers
+- Subtle (4pt): veg/non-veg mark
+- Pill-chip (7pt): rating pills
+- Standard (10pt): ADD button, stepper, search field, secondary buttons
+- Card (12pt): listing photos, dish thumbnails
+- Comfortable (22pt): the pull-up info card top, bottom sheets, modals
+- Pill (999px): the Delivery/Dining segmented toggle, filter chips
+- Circle (50%): avatars, hero nav scrims, map markers
+
+## 6. Depth & Elevation
+
+Zomato is mostly flat — separation comes from photography, dividers, the pull-up card and the semantic color system, with shadow reserved for floating actionable surfaces.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Menu rows, list cells, segmented toggle |
+| Raised (Level 1) | `rgba(0,0,0,0.12) 0 3px 8px` | "ADD" button / stepper over a thumbnail, sticky cart bar |
+| Pull-up Card | `rgba(0,0,0,0.10) 0 -4px 16px` | The info card sliding up over the hero photo |
+| Sheet (Level 2) | `rgba(0,0,0,0.12) 0 -4px 24px` | Customize sheet, cart sheet, address sheet |
+| Modal Scrim | `rgba(0,0,0,0.4)` | Dim behind sheets, modals and the hero nav scrims |
+
+**Shadow Philosophy**: shadow marks "this floats and is tappable" — primarily the ADD button overlapping the thumbnail and the sticky cart bar. The pull-up info card uses an upward shadow to read as a sheet rising over the photo. Menu rows and cards never carry shadow; the photo, dividers and rating pills carry the screen. On dark mode shadows fade, so floating surfaces add a 0.5pt divider border as the elevation cue.
+
+### Motion
+- **ADD → stepper**: the bordered ADD button cross-fades/expands in place into the bordered stepper over 180ms ease-out; cart bar slides up 280ms + soft haptic
+- **Quantity stepper**: number cross-fades + 120ms scale tick per tap; soft haptic
+- **Delivery/Dining toggle**: the active red fill slides between halves with a 220ms spring; content cross-fades 200ms
+- **Hero pull-up card**: on scroll the card translates and the hero parallax-scrolls at ~0.5x; nav fades from transparent to solid as the hero leaves
+- **Card → detail**: shared-element hero photo expands into the detail hero over a 320ms iOS push
+- **Rating pill appear**: pills fade/scale-in subtly (no aggressive motion) — the color is the signal, not the animation
+- **Sheet present**: customize/cart sheets slide up 300ms ease-out; scrim fades in parallel
+- **Order tracking**: rider marker animates along the route; status strip advances with a 250ms ease-out + medium haptic per stage
+- **Pull-to-refresh**: Zomato Red spinner on listing feeds
+- **Haptics**: light on toggle switch, soft on stepper / ADD, success notification on order placed, medium per tracking-stage advance
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure white (`#FFFFFF`) as the light canvas; warm near-black `#121212` for dark — never true black
+- Use Zomato Red (`#E23744`) for brand, primary action, "ADD", active tab and key CTAs
+- Make the rating pill **semantic** — green `#267E3E` (great) / amber `#DB7C38` (average) / red `#E23744` (poor); the color must always mean the same thing
+- Lead every menu item with the veg/non-veg mark (green dot square / maroon triangle square)
+- Use the **bordered** ADD button (surface + 1pt red border + red text), not a solid red fill — and morph it into a bordered red stepper
+- Overlap the ADD button on the dish thumbnail with a soft shadow so it is findable in a dense list
+- Provide the Delivery / Dining Out segmented toggle on restaurant detail and let it re-theme the screen
+- Open restaurant detail with a full-bleed hero photo + a pull-up info card (22pt top radius) carrying the dual rating pills
+- Show two rating pills (Delivery + Dining) with underlined review counts on the restaurant header
+- Keep type dense and heavy (names 800, titles 900), metadata small and muted
+- Embed the price in the primary button ("Add item · ₹320")
+
+### Don't
+- Don't make all rating pills one color — the semantic green/amber/red scale is the core of Zomato
+- Don't use a solid-red filled ADD button — Zomato's ADD is bordered with red text
+- Don't drop the veg/non-veg mark from menu items — it is mandatory and a brand signature
+- Don't merge Delivery and Dining into one undifferentiated screen — the toggle and its re-theming are central
+- Don't tint or square the hero photo — it is full-bleed and full-color
+- Don't use light/thin weights for names and categories — Zomato runs heavy (800/900)
+- Don't spread the Pro gold across the chrome — it is membership-only and used sparingly
+- Don't use the Dining Blue for delivery actions — blue is reservations/dining only
+- Don't shadow menu rows or cards in light mode — photo + dividers + pills create separation
+- Don't dim food photography in dark mode — only chrome darkens
+- Don't animate aggressively — the rating color is the signal, motion stays functional
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Hero ~180pt; dish thumbnail ~84pt; single column |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; hero nav scrims clear of the island |
+| iPhone 15/16 Pro Max | 430pt | Hero ~220pt; larger thumbnails |
+| iPad (portrait) | 768pt | 2-column restaurant grid; detail = hero + 2-column menu |
+| iPad (landscape) | 1024pt+ | 3-column grid; detail shows menu + sticky cart side-by-side |
+
+### Dynamic Type
+- Screen title, restaurant name, body, prices: full scale
+- Rating pill, veg/non-veg mark, Bestseller tag, tab labels, ADD label: FIXED (layout-sensitive)
+- Dish descriptions: scale to XL
+
+### Orientation
+- iPhone: portrait-locked on most flows; tracking map may rotate
+- iPad: full rotation; detail shows a two-pane (menu + cart) layout in landscape
+
+### Touch Targets
+- Menu row: full-row tap, ≥ 88pt tall
+- ADD button: ≥ 44pt hit (visually ~36pt tall)
+- Stepper controls: 36pt glyph in 44pt hit area
+- Segmented toggle half: ≥ 44pt tall
+- Tab bar icon: 22pt glyph, 44pt hit
+- Hero nav scrims: 34pt circle, 44pt hit
+- Primary buttons: 52pt tall
+
+### Safe Area Handling
+- Top: hero nav scrims respect safe area and Dynamic Island; collapsed nav respects the notch
+- Bottom: tab bar and sticky cart bar respect the home indicator
+- Hero photo: extends under the status bar with a top gradient scrim for legibility
+- Sides: 16–18pt content inset throughout
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF`
+- Canvas (dark): `#121212`
+- Surface (light): `#F4F4F5`
+- Divider (light): `#E8E8E8`
+- Text primary: `#1C1C1C` light / `#F2F2F2` dark
+- Text secondary: `#696969` light / `#9C9C9C` dark
+- Zomato Red (brand / primary): `#E23744`
+- Red pressed: `#C42531`
+- Rating great (green): `#267E3E`
+- Rating average (amber): `#DB7C38`
+- Rating poor (red): `#E23744`
+- Veg green: `#267E3E` / Non-veg maroon: `#B91C1C`
+- Pro gold: `#EFC75E` / Dining blue: `#256FEF`
+- Error red: `#E03A3A`
+
+### Example Component Prompts
+- "Build the Zomato rating pill in SwiftUI: a 7pt-radius chip, padding 4pt × 9pt, fill determined semantically by the score — `#267E3E` if rating ≥ 4.0, `#DB7C38` if 3.0–3.9, `#E23744` if < 3.0, `#9C9C9C` if unrated. Content: an 11pt white star + the score in Inter 14pt weight 800 white. For the restaurant header, render two pills side-by-side (Delivery + Dining) each with an underlined 11pt `#696969` review-count caption beneath ('12.4K Delivery')."
+
+- "Create a Zomato menu item row: leading 16pt veg/non-veg mark (a 1.5pt-bordered 3pt-radius square — `#267E3E` border + center dot for veg, `#B91C1C` border + center triangle for non-veg). Then an optional '★ Bestseller' tag in Inter 11pt 800 amber `#DB7C38`. Then the dish name Inter 15pt 700 `#1C1C1C`, price Inter 14pt 700, and a rating line (10pt green star + score + '(218)' in `#696969`). On the right: a 96pt rounded-12pt thumbnail with a bordered 'ADD' button overlapping its bottom edge by 16pt."
+
+- "Build the Zomato 'ADD' button: NOT a solid red fill — a `#FFFFFF` (dark: `#1C1C1E`) surface with a 1pt `#E23744` border, 10pt corner radius, label 'ADD' in Inter 14pt 800 `#E23744` with 0.3pt letter-spacing, padding 8pt × 22pt, soft `0 3px 8px rgba(0,0,0,0.12)` shadow, positioned overlapping the bottom of the dish thumbnail. On tap it morphs in place into a bordered red quantity stepper (same 1pt red border, 10pt radius; `−`/`+` 36pt red glyphs, count 15pt 800 red tabular)."
+
+- "Create the Zomato Delivery / Dining Out segmented toggle: a 999px pill track `#F4F4F5` (dark `#262629`) with 4pt inner padding and two equal segments. The active segment is filled Zomato Red `#E23744` with white Inter 13pt 700 text; the inactive segment text is `#696969`. Switching slides the red fill between halves over 220ms with a spring and cross-fades the screen content (menu ⇄ offers/reviews/book-a-table) over 200ms."
+
+- "Build the Zomato restaurant detail header: a 200pt full-bleed hero photo under a transparent nav (back + search + heart in 34pt `rgba(0,0,0,0.4)` circular scrims, white glyphs). Below, an info card pulled up -22pt over the photo with a 22pt top corner radius, `#FFFFFF`/`#121212` background: restaurant name Inter 24pt 800, a 'North Indian, Mughlai · Colaba · 2.4 km' meta line Inter 13pt 400 `#696969`, then the two side-by-side rating pills. On scroll the hero parallaxes at 0.5x and the nav fades to a solid bar with the compact name."
+
+- "Render the Zomato bottom tab bar: 4 tabs — Delivery, Dining, Live, Profile. 22pt icons, labels Inter 10pt 600 always shown. Active tab tinted `#E23744` with filled icon; inactive `#888`. Background `#FFFFFF` light / `rgba(18,18,18,0.94)` blurred dark with a 0.5pt top divider."
+
+### Iteration Guide
+1. Canvas is pure white (`#FFFFFF`) light, warm near-black `#121212` dark — never true black
+2. Zomato Red `#E23744` = brand/primary/ADD/active tab; pressed `#C42531`
+3. The rating pill is SEMANTIC: green `#267E3E` great / amber `#DB7C38` average / red `#E23744` poor — color always means the same thing
+4. Every menu item leads with a veg/non-veg mark (green dot square / maroon triangle square)
+5. The ADD button is BORDERED (surface + 1pt red border + red text), overlaps the thumbnail, and morphs into a bordered red stepper — never a solid red fill
+6. Restaurant detail has a Delivery / Dining Out segmented toggle that re-themes the whole screen
+7. Detail opens with a full-bleed hero photo + a pull-up info card (22pt top radius) and two side-by-side rating pills
+8. Type runs dense and heavy — names 800, screen titles 900, small muted metadata
+9. Pro gold `#EFC75E` is membership-only; Dining Blue `#256FEF` is reservations-only
+10. No shadow on menu rows/cards in light mode — photo + dividers + semantic pills create the separation