Zomato DESIGN.md

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

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

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

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.

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

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