A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
3radius steps
2pxspacing base
Swiggy, in one page
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
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 —#121212is 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Swiggy design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Swiggy Orange: #fc8019
- Swiggy Orange Pressed: #e06d0c
- Swiggy Orange Tint: #fc8019
- Rating Green: #48c479
- Rating Amber: #db7c38
- Rating Red: #e84a4a
- Instamart Purple: #982c61
- Dineout Red: #d7385e
- Offer Gradient: #fc8019
- Canvas White: #ffffff
Type:
- families: ProximaNova, Basis Grotesque, Plus Jakarta Sans, Dynamic Type
- scale: 10, 12, 13, 14, 15, 16, 17, 18, 22
- weights: 400, 600, 700, 800
Shape:
- radius: 10, 12, 14
- elevation: Shadow: `rgba(0,0,0,0.5) 0 4px 12px`
Spacing: 2, 7, 11, 14, 22
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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.
Type scaleRead the full spec
Font Family
- Brand / Display:
ProximaNovalineage — 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).
Components and layoutRead the full spec
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:
#FFFFFFlight /#2A2A2Adark - Border: 1pt
#48C479 - Text:
#48C479(or#1BA672light), 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
#48C479border −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,
#FC801911pt/800
Filter Chip
- Rounded rectangle, 8pt corner radius
- Default:
#FFFFFF/#1C1C1Efill, 1pt#E2E2E7/#2C2C2Eborder, text#02060C/#F2F2F212pt/600 - Active:
#ECECEE/#2A2A2Afill, 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 orangemic - Placeholder: rotating ("Search 'biryani'", "Search 'cake'")
#686B78/#A0A0A014pt/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,
#02060Conce 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
#686B78on focus; text#02060C/#F2F2F215pt - Focus: 1pt
#FC8019border - Error: 1pt
#E84A4Aborder + 12pt red helper text
Coupon Field
- Inline within cart, dashed
#686B78border, 8pt radius - "APPLY" trailing text button in
#FC801913pt/800 UPPERCASE
Distinctive Components
Photo-Forward Restaurant Card
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-swiggy {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #121212;
--heading-color: #121212;
--link-color: #ae5103;
--link-hover-color: #7c3a02;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(18,18,18,0.06);
--card-hover-shadow: 0 6px 18px rgba(18,18,18,0.12);
--header-bg: #121212;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #656565;
--button-bg: #fc8019;
--button-text-color: #000000;
--button-hover-bg: #df6703;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #121212;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #121212;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/food/swiggy/DESIGN.md· 26.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.