Swiggy

name Swiggy

colors background: "#ffffff" foreground: "#282c3f" # Swiggy Charcoal brand: "#fc8019" # Primary Orange muted: "#686b78" border: "#e9e9eb" card: "#ffffff" accent: "#fc8019" dark: background: "#121212" foreground: "#e9e9eb" muted: "#93959f" border: "#282c3f" card: "#1a1a1a" accent: "#fc8019"

typography fontFamily: sans: "Basis Grotesque Pro, system-ui, sans-serif" body: fontSize: "14px" lineHeight: "1.4" heading: fontWeight: "700" letterSpacing: "-0.02em"

rounded default: "0px" # Swiggy marketing often uses sharp edges md: "8px" # UI components use soft rounding full: "9999px"

Design System: Swiggy

Overview

Swiggy's design system is vibrant, approachable, and focused on "Delivery Happiness." It centers around a signature orange that communicates warmth, speed, and reliability.

Design Philosophy

• Warm & Reliable: The brand uses warm oranges and yellows to feel friendly and dependable.

• Clutter-Free Discovery: Prioritizes horizontal "lanes" of content (e.g., "Top Brands," "Offers") for easy discovery.

• Information Transparency: Clearly displays delivery time, distance, and ratings to help users make fast decisions.

• The "Orange Thread": Swiggy Orange is the primary navigation guide through the app.

Colors

• Swiggy Orange (#FC8019): A vibrant "Pumpkin" orange that represents the brand's core energy and delivery fleet.

• Charcoal (#282C3F): Used for primary text to provide a sophisticated contrast to the orange.

• Secondary Accents: Uses yellows (#F3C334) for offers and highlights.

Typography

• Basis Grotesque Pro: A modern, clean sans-serif that provides a professional yet friendly voice.

• Bold Statements: Uses heavy weights for headers and numbers (like delivery times) to ensure they are the first thing users see.

Components

• Delivery Time Badge: Often featured with a small "clock" icon and bold text.

• Category Tiles: High-contrast images with overlay text, usually organized in a dense grid or scrollable lane.

• The "Instamart" Mode: Uses a distinct color palette (often involving dark blues or greens) to differentiate grocery from food delivery.

Visual Effects

• Hard Shadows: Occasionally uses hard-edged shadows in marketing materials to create a "Pop Art" feel.

• Micro-animations: Features "bike moving" animations for order tracking to provide a sense of progress.

• Clear Gradients: Uses subtle orange-to-yellow gradients for headers and special offer sections.