Swiggy

Overview

Swiggy is India's leading on-demand services platform, delivering food, groceries, and dining experiences with uncompromising speed and reliability. The design system embodies 'Energetic Pragmatism'—a visual language that combines vibrant, action-oriented orange (#ff5200) with clean, minimal white surfaces and deep navy text (#02060c). This aesthetic communicates urgency and trust simultaneously: the brand personality is fast, friendly, and always one tap away. The UI celebrates the joy of instant gratification while maintaining the clarity needed for complex transactions. Voice: direct, conversational, occasionally playful. Example: 'Your order's on the way—grab a snack while you wait.'

Colors

The color system is built around a dominant primary orange (#ff5200) that appears on all CTAs, headers, and interactive states—this is the brand's signature accent, instantly recognizable and action-inducing. The surface stack uses pure white (#ffffff) for primary surfaces, with subtle grays (#f4f4f5, #eef0f5) for container hierarchy and depth. Text defaults to near-black (#02060c) for maximum legibility on light backgrounds, with secondary text at rgba(2, 6, 12, 0.6) for reduced emphasis. Supporting colors include a fresh green (#1ba672) for success states and delivery confirmations, a calm blue (#5d8ed5) for secondary information, and a muted red (#fa4a5b) for errors and alerts. Shadows use dark navy with 12–20% opacity (rgba(40, 44, 63, 0.15) for lg elevation) to create subtle depth wit

Typography

The type system uses Gilroy as the primary font family (with arial and Helvetica Neue as fallbacks), a geometric sans-serif that conveys modernity and efficiency. Display (60px, 700 weight) is reserved for hero headlines; Headline-lg (40px, 600 weight) anchors major sections; Headline-md (32px, 600 weight) introduces subsections. Body-lg (18px, 400 weight) is used for prominent descriptive text, while Body-md (16px, 400 weight) serves as the default paragraph text. Label-md (14px, 600 weight) is applied to button text and form labels, ensuring clickable elements stand out with weight and size. Letter-spacing is tightened to -0.04em on display and -0.02em on headlines to create visual impact and reduce perceived size; body text uses 0em spacing for natural readability. Line-height is set to

Layout

The layout uses a fixed 12-column grid with a max-width of 1200px, centered on desktop with 20px horizontal gutters (gutter token). Mobile breakpoints collapse to 90vw width, maintaining the same gutter. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for compact components, md (24px) for standard padding and margins, lg (40px) for section separation, and xl (64px) for major layout breaks. The header occupies a fixed 80px height with 0 15px 40px -20px rgba(40, 44, 63, 0.15) shadow for elevation. Hero sections use lg spacing above and below; card grids use md spacing between items. White-space is generous but purposeful—never cramped—to emphasize the 'fast and clear' brand promise. Container backgrounds are pure white or very light gray (#f4f4f5) to ensure text l

Elevation & Depth

Depth is achieved through a three-tier shadow system that creates clear visual hierarchy without visual heaviness. Level 1 (Base/Cards): 0 1px 3px 0 rgba(0, 0, 0, 0.12)—subtle, used on standard cards and form inputs to separate them from the background. Level 2 (Hover/Elevated): 0 2px 8px rgba(2, 6, 12, 0.2)—applied on button hover and card hover states to signal interactivity and lift. Level 3 (Modal/Header): 0 15px 40px -20px rgba(40, 44, 63, 0.15)—reserved for fixed headers, modals, and floating elements that demand maximum visual separation. No blur or backdrop-filter is used; the system r

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used sparingly and purposefully to soften the utilitarian grid while maintaining clarity. Buttons and inputs use 0.5rem (8px) border-radius for a modern, approachable feel that's not overly playful. Cards and containers use 1rem (16px) for a slightly softer appearance that encourages visual grouping. Full-circle (9999px) is reserved for avatar images and icon buttons to create focal points. The location and search inputs use 0.5rem to match button styling, creating visual consistency in the hero section. No elements use sharp 0px cor

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use #ff5200 background with white text, 40px height, 14px label-md typography, and 0 1px 3px 0 rgba(0, 0, 0, 0.12) shadow. On hover, the shadow elevates to 0 2px 8px rgba(2, 6, 12, 0.2) and the element translates up 1px (transform: translateY(-1px)) over 300ms ease. Secondary buttons use a transparent background with #ff5200 border (1px solid) and text, maintaining the same height and typography. Ghost buttons (e.g., 'Sign in') use transparent backgrounds with dark text and no border, expanding to full-width on mobile. All buttons disable at opacity 0.5 with cursor: not-allowed.

Containers & Surfaces Cards use white backgrounds (#ffffff) with 1px solid #c4c7cc borders and 24px padding. On hover, the bac

Do's and Don'ts

**Do**

• Do use #ff5200 (primary orange) on all CTAs, hover states, and focus indicators—it's the brand's signature and must be instantly recognizable.
• Do maintain 20px horizontal gutters and lg (40px) spacing between major sections to preserve the 'fast and clear' visual rhythm.
• Do apply Gilroy font at 600+ weight for all interactive elements (buttons, labels, headers) to ensure they command attention.
• Do use the three-tier shadow system (1px/2px/15px) consistently—never mix shadow values or introduce blur effects.
• Do keep text contrast at WCAG AA minimum (4.5:1 for body text) by using #02060c on white and white on #ff5200.

**Don't**

• Don't use colors other than the defined palette—avoid custom oranges, grays, or blues that dilute brand recognition.
• Don't apply border-radius greater than 1.5rem except for avatars and icon buttons; sharp corners feel harsh, full-circle feels playful.
• Don't mix font families; Gilroy is the only typeface—arial and Helvetica are fallbacks only.
• Don't add drop-shadows, glows, or blur effects beyond the defined elevation system; they introduce visual noise and reduce clarity.
• Don't use opacity below 0.5 for disabled states; use explicit disabled styling (cursor: not-allowed, color: rgba(2, 6, 12, 0.3)) instead.