DESIGN.md · explainx registry
Zomato
Zomato's design system is built for appetite and speed. It uses a high-energy red and clean, food-first layouts to guide users toward their next meal.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | Zomato |
| colors | background: "#ffffff" foreground: "#2d2d2d" # Zomato Mine Shaft brand: "#cb202d" # Primary Red muted: "#828282" border: "#f4f4f2" # Desert Storm card: "#ffffff" accent: "#cb202d" dark: background: "#0a0a0a" foreground: "#f4f4f2" muted: "#828282" border: "#2d2d2d" card: "#1a1a1a" accent: "#cb202d" |
| typography | fontFamily: sans: "Okra, Inter, system-ui, sans-serif" body: fontSize: "14px" lineHeight: "1.5" heading: fontWeight: "600" letterSpacing: "-0.01em" |
| rounded | default: "8px" md: "12px" lg: "16px" |
Design System: Zomato
Overview
Zomato's design system is built for appetite and speed. It uses a high-energy red and clean, food-first layouts to guide users toward their next meal.
Design Philosophy
- Appetite First: The UI recedes to make food photography the primary focus.
- High-Energy Action: The "Zomato Red" is used for all primary conversion points, creating a sense of urgency and excitement.
- Clean Density: Information about ratings, prices, and delivery times is presented in a highly structured, scannable format.
- Reliability: Clear, consistent iconography and status updates build trust throughout the ordering process.
Colors
- Zomato Red (#CB202D): The signature "Fire Engine Red" that represents the brand's energy and passion for food.
- Desert Storm (#F4F4F2): A subtle off-white used for backgrounds and borders to provide a clean, "fresh" feel.
- Mine Shaft (#2D2D2D): A deep grey used for text and secondary headers to ensure high legibility without the harshness of pure black.
Typography
- Okra: Zomato's custom typeface, designed to be friendly yet professional, with high legibility for small UI text.
- Visual Hierarchy: Uses bold weights for restaurant names and ratings to create clear entry points for the eye.
Components
- The Rating Chip: A small, high-contrast box (usually Green, Yellow, or Red) that is the most looked-at element in the UI.
- Restaurant Cards: Feature large, bleed-edge photography and integrated delivery status markers.
- Filter Pills: Rounded pills used for quick category selection, using subtle grey backgrounds and bold active states.
Visual Effects
- Soft Shadows: Uses very subtle shadows to lift cards off the background without creating visual clutter.
- Progressive Disclosure: Hides secondary information (like detailed reviews) until the user expresses interest.
- Fast Transitions: Uses snappy animations to mimic the speed of delivery and service.
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 Zomato on explainx.ai?
- Zomato's design system is built for appetite and speed. It uses a high-energy red and clean, food-first layouts to guide users toward their next meal. 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