DESIGN.md · explainx registry
Swiggy
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 System#design#ui#ux#template
DESIGN.md (markdown body)
| 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.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is Swiggy on explainx.ai?
- Swiggy's design system is vibrant, approachable, and focused on "Delivery Happiness." It centers around a signature orange that communicates warmth, speed, and reliability. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide