Food Delivery / iOS / Android / Web

Swiggy

Swiggy greets you with one orange band and then gets out of the way: white 16px cards, one near-black ink at many strengths, and color only where there is an offer.

Download
  • #FF5200
  • #02060C
  • #F0F0F5
  • #1BA672
  • #C8F9E5
  • #5134B6

Color

Every color token in the file, grouped by role.

Brand

  • primary#FF5200
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#02060C
  • ink strong#151A1F
  • ink body#414449
  • ink muted#676A6D
  • instamart ink#282C3F

Lines

  • hairline#EBEBEB

More

  • band#F0F0F5
  • offer green#1BA672
  • offer mint#C8F9E5
  • offer purple#5134B6
  • instamart blue#0050FF
  • instamart wash#EEF6FF
  • night#000000

Typography

Each style is set with the file's own family, size, weight and spacing.

  • GilroyGilroy is private and not available in open fonts. Shown in Figtree, the closest open match.
  • display48px / 600 / 56px

    Swiggy

  • headline24px / 600 / 26px

    Pack my box with five dozen liquor jugs

  • title21px / 700 / 25.2px

    Pack my box with five dozen liquor jugs

  • subtitle18px / 800 / 22px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 19.2px

    The quick brown fox jumps over the lazy dog

  • label14px / 300 / 16.8px

    Continue to checkout

  • pill14px / 600 / 18px

    The quick brown fox jumps over the lazy dog

  • small13px / 200 / 17px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs6px
  • sm8px
  • md12px
  • lg16px
  • xl20px
  • pill48px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md14px
  • base16px
  • lg28px

Components

Component tokens drawn with the colors, type and corners they name.

  • app pill
    app-pill
  • restaurant card
    restaurant-card
  • city chip
    city-chip
  • offer chip
    offer-chip
  • instamart pill
    instamart-pill
  • hero band
    hero-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 127 lines
version: alpha
name: Swiggy-design-analysis
description: "A food and grocery delivery app in Swiggy orange (#ff5200) with near-black text at layered opacities, Gilroy from light 200 to heavy 800, 16px restaurant cards with hairline edges, cool gray bands, green offer chips and a blue-led Instamart grocery sub-brand."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#ff5200"
  on-primary: "#ffffff"
  ink: "#02060c"
  ink-strong: "#151a1f"
  ink-body: "#414449"
  ink-muted: "#676a6d"
  canvas: "#ffffff"
  band: "#f0f0f5"
  hairline: "#ebebeb"
  offer-green: "#1ba672"
  offer-mint: "#c8f9e5"
  offer-purple: "#5134b6"
  instamart-blue: "#0050ff"
  instamart-ink: "#282c3f"
  instamart-wash: "#eef6ff"
  night: "#000000"

typography:
  # Font note: "Gilroy" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  display:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 56px
    letterSpacing: -0.3px
  headline:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 26px
    letterSpacing: -0.6px
  title:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 21px
    fontWeight: 700
    lineHeight: 25.2px
  subtitle:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 18px
    fontWeight: 800
    lineHeight: 22px
    letterSpacing: -0.45px
  body:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19.2px
  label:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 16.8px
  pill:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 18px
    letterSpacing: -0.35px
  small:
    fontFamily: "Gilroy, Arial, 'Helvetica Neue', sans-serif"
    fontSize: 13px
    fontWeight: 200
    lineHeight: 17px
    letterSpacing: -0.33px

rounded:
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  pill: 48px

spacing:
  xs: 4px
  sm: 8px
  md: 14px
  base: 16px
  lg: 28px

components:
  app-pill:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.pill}"
    rounded: "{rounded.pill}"
    height: 32px
    padding: 8px 14px
  restaurant-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
  city-chip:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 32px
    padding: 4px 8px
  offer-chip:
    backgroundColor: "{colors.offer-mint}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 36px
  instamart-pill:
    backgroundColor: "{colors.instamart-blue}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.xl}"
    height: 38px
    padding: 0 16px
  hero-band:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display}"

Overview

Swiggy delivers restaurant food and groceries across Indian cities, with Instamart for quick grocery delivery and Dineout for table bookings. Its site opens on a Swiggy orange hero with white headline type, then lays out restaurants on white 16px cards with hairline edges. Text is a single near-black at several opacities, and Gilroy runs from a light 200 to a heavy 800. [Observed]

What defines the look:

  1. Swiggy orange. #ff5200 fills the hero band, the logo and the mobile "Open app" pill. [Measured]
  2. One ink, many opacities. Text is #02060c at 92 percent for headings, 90 for navigation, 75 for body and 60 for helper text, and borders are the same ink at 8 and 15 percent. [Measured]
  3. Gilroy across the range. Headings at 600 to 800 with tight tracking, navigation at 400, and labels and city links as light as 200 and 300. [Measured]
  4. 16px cards. Restaurant cards and image tiles use 16px corners with a 1px hairline of ink at 8 percent. [Measured]
  5. Colored offers. Offer chips are green #1ba672 or mint #c8f9e5, and bank offers are set in purple #5134b6. [Measured]

Source for this file: the home page, the restaurants listing for the default city and the Instamart page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Swiggy does not publish its design system. Menus, the cart and checkout need an address and an account. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Swiggy orange#ff5200Hero band, logo, mobile app pill [Measured]
Ink#02060c at 92, 90, 75 and 60 percent (about #151a1f, #1b1f24, #414449, #676a6d on white)Headings, nav, body, helper text [Measured]
Hairlinesink at 8 and 15 percentCard edges, city chips [Measured]
Canvas#ffffffHeader and cards [Measured]
Band#f0f0f5Gray sections [Measured]
Offer green and mint#1ba672, #c8f9e5Dineout and bank offer chips [Measured]
Offer purple#5134b6Payment offer lines [Measured]
Instamart blue#0050ff, ink #282c3f, wash #eef6ffThe Instamart page [Measured]

Typography

Gilroy at 200, 300, 400, 600, 700 and 800. [Measured]

RoleDesktopMobileWeight and tracking
Hero48 on 56, -0.3px18 on 20600 [Measured]
Section heading24 on 26, -0.6px18 on 22, -0.45px600 desktop, 800 mobile [Measured]
Listing heading21 on 25.220 on 24, -0.5px700 to 800 [Measured]
Navigation16 on 19.2not shown400 [Measured]
Label14 on 16.8same200 to 300 [Measured]
City link13 on 17, -0.33px14 on 18200 to 400 [Measured]

Shape and spacing

Cards and image tiles use 16 (the most common radius), city chips and offer chips 8, Instamart tiles 12, 8 and 6, and the app pills 20 and 48. [Measured] Navigation items sit 28px apart in an 80 high header. [Measured]

Iconography and motion

Icons come from an icon font. [Measured] Motion was not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the Swiggy iOS app looks and behaves was not captured. Swiggy does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar switching between Food, Instamart and Dineout is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

An orange view cart or checkout bar near the bottom. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the orange, the layered ink and Gilroy with the web. [Inferred]

Platform: Android

How the Swiggy Android app looks and behaves was not captured. Swiggy does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar switching between Food, Instamart and Dineout is expected. [Inferred]

Main action

Expected on Android: Floating action button.

An orange view cart or checkout bar near the bottom. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the orange, the layered ink and Gilroy with the web. [Inferred]

Platform: Web

The home page, a restaurants listing and the Instamart page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

An 80 high white header with Search, Offers, Help and Sign In as text links at 16. On mobile the header shows an orange "Open app" pill with white uppercase 14px semibold text, 32 high with a 48px radius, and a black Sign in pill. [Measured]

Main action

Expected on Web: Page-level button.

On the home page, the location and search field in the orange hero. In listings, the restaurant card itself. [Observed]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

City chips are 32 high with an 8px corner and a hairline of ink at 15 percent. "Show More" rows are full-width text buttons. The Instamart search is a 48 high field with a 12px corner and a 1px #e2e2e7 border, and its "Get app" pill is blue #0050ff, 38 high with a 20px corner. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width, with the hero dropping from 48 to 18. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Chips and pills are 32 to 38 high, below 44. Mobile list rows are about 42. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

An icon font for interface glyphs. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not checked on the pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A listing-first responsive site where cards carry most of the design, and the grocery sub-brand swaps orange for blue. [Measured]

Cross-platform consistency

Consistent across platforms: the orange, the layered near-black ink, Gilroy and 16px cards. [Measured for web, Inferred for the apps]

Intentionally different: Instamart uses its own blue and ink instead of orange. [Measured]

Do's and Don'ts

Do

  • Use orange for the brand band and the app call to action.
  • Set every text color as the one near-black at an opacity step.
  • Give cards 16px corners and a hairline edge instead of a shadow.
  • Keep offers in their own green, mint and purple.

Don't

  • Don't use orange for body text or links.
  • Don't mix gray hexes into the text. Use the ink at an opacity.
  • Don't use Instamart blue on the food pages.

Known Gaps

  • Menus, the cart, checkout and the account need an address and an account and were not measured.
  • The iOS and Android apps were not captured, and Swiggy publishes no design system, so every mobile topic is inferred.
  • Motion and modals were not measured.
  • Chips and pills are 32 to 38 high, below the 44 and 48 touch minimums. That is the shipped size.
  • Text tones are translucent. The hex values in the table are those tints flattened on white.
  • Gilroy is private. Figtree was chosen by comparing the same 48px headline side by side: within 1 percent of the width with the same round geometric shapes. IBM Plex Sans matched width more exactly but its shapes are not geometric.
  • White text on Swiggy orange measures 3.25 to 1, below the 4.5 to 1 minimum for normal text, on the app pill and the hero band. The hero text is large (48px), where 3 to 1 applies. The values were kept.
  • Account deletion and store policy rules were not verified.